使用ng-change选择ng-object

给定下面的select元素

<select ng-options="size.code as size.name for size in sizes "
ng-model="item.size.code"
ng-change="update(MAGIC_THING)">
</select>

是否有一种方法可以让MAGIC_THING等于当前选择的大小，这样我就可以访问控制器中的size.name和size.code ?

大小。代码会影响应用程序的许多其他部分(图像url等)，但当item.size.code的ng-model更新时，item.size.name也需要更新，以便面向用户的东西。我假设做到这一点的正确方法是捕获更改事件并在控制器中设置值，但我不确定我可以将什么传递到update以获得正确的值。

如果这是完全错误的方法，我很想知道正确的方法。

724599 次浏览
小开
最佳答案

而不是将ng-model设置为item.size。代码，如何设置它的大小:

<select ng-options="size as size.name for size in sizes"
ng-model="item" ng-change="update()"></select>

然后在你的update()方法中，$scope.item将被设置为当前选择的项。

任何需要item.size.code的代码都可以通过$scope.item.code获得该属性。

小提琴。

更新基于评论中的更多信息:

为你的select ng-model使用一些其他的$scope属性，然后:

<select ng-options="size as size.name for size in sizes"
ng-model="selectedItem" ng-change="update()"></select>

控制器:

$scope.update = function() {
$scope.item.size.code = $scope.selectedItem.code
// use $scope.selectedItem.code and $scope.selectedItem.name here
// for other stuff ...
}
小开

您也可以使用以下代码直接获取所选值

 <select ng-options='t.name for t in templates'
ng-change='selectedTemplate(t.url)'></select>

script.js

 $scope.selectedTemplate = function(pTemplate) {
//Your logic
alert('Template Url is : '+pTemplate);
}
小开 
<select ng-model="item.size.code">
<option ng-repeat="size in sizes" ng-attr-value="size.code">\{\{size.name}}          </option>
</select>
小开

如果Divyesh Rupawala的答案不起作用(将当前项作为参数传递)，那么请参阅这个Plunker中的onChanged()函数。它正在使用this:

< a href = " http://plnkr。有限公司/编辑/ B5TDQJ noreferrer“rel = > http://plnkr.co/edit/B5TDQJ < / >

小开

这可能会给你一些启发

.NET c#视图模型

public class DepartmentViewModel
{
public int Id { get; set; }
public string Name { get; set; }
}

.NET c# Web Api控制器

public class DepartmentController : BaseApiController
{
[HttpGet]
public HttpResponseMessage Get()
{
var sms = Ctx.Departments;


var vms = new List<DepartmentViewModel>();


foreach (var sm in sms)
{
var vm = new DepartmentViewModel()
{
Id = sm.Id,
Name = sm.DepartmentName
};
vms.Add(vm);
}


return Request.CreateResponse(HttpStatusCode.OK, vms);
}


}

角控制器:

$http.get('/api/department').then(
function (response) {
$scope.departments = response.data;
},
function (response) {
toaster.pop('error', "Error", "An unexpected error occurred.");
}
);


$http.get('/api/getTravelerInformation', { params: { id: $routeParams.userKey } }).then(
function (response) {
$scope.request = response.data;
$scope.travelerDepartment = underscoreService.findWhere($scope.departments, { Id: $scope.request.TravelerDepartmentId });
},
function (response) {
toaster.pop('error', "Error", "An unexpected error occurred.");
}
);

角模板:

<div class="form-group">
<label>Department</label>
<div class="left-inner-addon">
<i class="glyphicon glyphicon-hand-up"></i>
<select ng-model="travelerDepartment"
ng-options="department.Name for department in departments track by department.Id"
ng-init="request.TravelerDepartmentId = travelerDepartment.Id"
ng-change="request.TravelerDepartmentId = travelerDepartment.Id"
class="form-control">
<option value=""></option>
</select>
</div>
</div>
小开

你也可以试试这个:

<select  ng-model="selectedItem" ng-change="update()">
<option ng-repeat="item in items"
ng-selected="selectedItem == item.Id" value="\{\{item.Id}}">
\{\{item.Name}}
</option>
</select>
小开

. 
//Javascript
$scope.update = function () {
$scope.myItem;
alert('Hello');
}
<!--HTML-->
<div class="form-group">
<select name="name"
id="id"
ng-model="myItem"
ng-options="size as size.name for size in sizes"
class="form-control"
ng-change="update()"
multiple
required>
</select>
</div>

İf你想写，名字，id，类，多个，必需，你可以这样写。

小开

您需要使用“track by”，以便正确地比较对象。否则，Angular将使用原生js的方式来比较对象。

所以你的示例代码会变成-

    <select ng-options="size.code as size.name
for size in sizes track by size.code"
ng-model="item.size.code"></select>
小开

AngularJS的过滤器为我工作。

假设code/id是独特的，我们可以用AngularJS的filter过滤掉这个特定的对象，并使用所选对象的属性。考虑上面的例子:

<select ng-options="size.code as size.name for size in sizes"
ng-model="item.size.code"
ng-change="update(MAGIC_THING); search.code = item.size.code">
</select>


<!-- OUTSIDE THE SELECT BOX -->


<h1 ng-repeat="size in sizes | filter:search:true"
ng-init="search.code = item.size.code">
\{\{size.name}}
</h1>

现在，有这其中有三个重要的方面:

  1. ng-init="search.code = item.size.code" -在select框外初始化h1元素时，将筛选器查询设置为selected option。

  2. ng-change="update(MAGIC_THING); search.code = item.size.code" -当你改变选择输入时，我们将运行另一行，将“搜索”查询设置为当前选择的item.size.code。

  3. filter:search:true -传递true到过滤器，以启用严格匹配。

就是这样。如果size.code为uniqueID，则只有一个文本为size.name的h1元素。

我已经在我的项目中进行了测试，它是有效的。

祝你好运

小开
这是从angular选择选项列表中获取值的最简洁的方法(除了Id或Text)。 假设你的页面上有这样一个Product Select:

<select ng-model="data.ProductId"
ng-options="product.Id as product.Name for product in productsList"
ng-change="onSelectChange()">
</select>

然后在你的控制器中像这样设置回调函数:

    $scope.onSelectChange = function () {
var filteredData = $scope.productsList.filter(function (response) {
return response.Id === $scope.data.ProductId;
})
console.log(filteredData[0].ProductColor);
}

由于ng-change事件不识别选择中的选项项，我们使用ngModel从控制器中加载的选项列表中过滤出所选的项。

此外，由于事件是在ngModel真正更新之前触发的，你可能会得到不希望看到的结果，所以一个更好的方法是添加一个超时:

        $scope.onSelectChange = function () {
$timeout(function () {
var filteredData = $scope.productsList.filter(function (response) {
return response.Id === $scope.data.ProductId;
})
console.log(filteredData[0].ProductColor);
}, 100);
};

提交答案