size.code affects a lot of the other parts of the app (image urls, etc), but when the ng-model of item.size.code is updated, item.size.name needs to be updated as well for the user facing stuff. I assume that the correct way to do this is capturing the change event and setting the values inside of my controller, but I'm not sure what I can pass into update to get the proper values.
If this is completely the wrong way to go about it, I'd love to know the right way.
如果这是完全错误的方式,我想知道正确的方式。
10 个解决方案
#1
444
Instead of setting the ng-model to item.size.code, how about setting it to size:
而不是将ng-model设置为item.size。代码,如何设置它的大小:
Then in your update() method, $scope.item will be set to the currently selected item.
然后在update()方法中,使用$scope。项目将被设置为当前选择的项目。
And whatever code needed item.size.code, can get that property via $scope.item.code.
以及任何代码需要的项。size。代码,可以通过$scope.item.code获得该属性。
Fiddle.
小提琴。
Update based on more info in comments:
基于更多的信息更新评论:
Use some other $scope property for your select ng-model then:
然后为您的选择ng-model使用一些其他的$scope属性:
Controller:
控制器:
$scope.update = function() {
$scope.item.size.code = $scope.selectedItem.code
// use $scope.selectedItem.code and $scope.selectedItem.name here
// for other stuff ...
}
#2
56
You can also directly get selected value using following code
If Divyesh Rupawala's answer doesn't work (passing the current item as the parameter), then please see the onChanged() function in this Plunker. It's using this:
//Javascript
$scope.update = function () {
$scope.myItem;
alert('Hello');
}
İf you want to write, name, id, class, multiple, required , You can write in this way.
İf你想写、名称、id、类,多个,必需的,你可以以这种方式编写。
#7
1
This might give you some ideas
这可能会给你一些建议
.NET C# View Model
net c#视图模型
public class DepartmentViewModel
{
public int Id { get; set; }
public string Name { get; set; }
}
.NET C# Web Api Controller
。net c# Web Api控制器
public class DepartmentController : BaseApiController
{
[HttpGet]
public HttpResponseMessage Get()
{
var sms = Ctx.Departments;
var vms = new List();
foreach (var sm in sms)
{
var vm = new DepartmentViewModel()
{
Id = sm.Id,
Name = sm.DepartmentName
};
vms.Add(vm);
}
return Request.CreateResponse(HttpStatusCode.OK, vms);
}
}
Assuming the code/id is unique, we can filter out that particular object with AngularJS's filter and work with the selected objects properties. Considering the example above:
ng-change="update(MAGIC_THING); search.code = item.size.code" - when you change the select input, we'll run one more line which will set the "search" query to the currently selected item.size.code.
filter:search:true - Pass true to filter to enable strict matching.
过滤器:搜索:真-传递真过滤,使严格匹配。
That's it. If the size.code is uniqueID, we'll have only one h1 element with the text of size.name.
就是这样。如果大小。代码是独特的eid,我们将只有一个h1元素的文本大小。name。
I've tested this in my project and it works.
我在我的项目中测试过这个,它很有效。
Good Luck
祝你好运
#9
0
You need to use "track by" so that the objects can be compared correctly. Otherwise Angular will use the native js way of comparing objects.
您需要使用“track by”来正确地比较对象。否则,角度将使用本机js方式比较对象。
So your example code would change to -
所以你的例子代码会变成-
#10
0
This is the cleanest way to get a value from an angular select options list (other than The Id or Text). Assuming you have a Product Select like this on your page :
这是从角选择选项列表(除了Id或文本)获取值的最干净的方法。假设您的页面上有这样的产品选择:
Then in Your Controller set the callback function like so:
然后在控制器中设置回调函数如下:
$scope.OnSelectChange= function () {
var filteredData = $scope.productsList.filter(function (response) {
return response.Id === $scope.data.ProductId;
})
console.log(filteredData[0].ProductColor);
}
Simply Explained: Since the ng-change event does not recognize the option items in the select, we are using the ngModel to filter out the selected Item from the options list loaded in the controller.
Furthermore, since the event is fired before the ngModel is really updated, you might get undesirable results, So a better way would be to add a timeout :