给定以下选择元素
<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以获得正确的值。
如果这是完全错误的方法,我想知道正确的方法。
将ng-model设置为item.size。代码,将其设置为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
获得该属性。
小提琴。
根据注释中的更多信息更新:
使用其他$scope属性来选择ng-model,然后:
<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="selectedItem" ng-change="update()">
<option ng-repeat="item in items"
ng-selected="selectedItem == item.Id" value="{{item.Id}}">
{{item.Name}}
</option>
</select>
如果Divyesh Rupawala的答案不起作用(将当前项目作为参数传递),则请参阅此Plunker中的onChanged()
函数。它使用this
:
<select ng-model="item.size.code">
<option ng-repeat="size in sizes" ng-attr-value="size.code">{{size.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,类,多个,必填项,你可以这样写
这可能会给你一些启发
。. NET c#视图模型
public class DepartmentViewModel
{
public int Id { get; set; }
public string Name { get; set; }
}
。. NET c# Web Api Controller
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>
您需要使用"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的Filter为我工作。
假设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>
现在,有三个重要的方面:
ng-init="search.code = item.size.code"
-在初始化select
框外的h1
元素时,将过滤器查询设置为所选选项。ng-change="update(MAGIC_THING); search.code = item.size.code"
-当你改变选择输入时,我们将多运行一行,将"搜索"查询设置为当前选择的item.size.code
。filter:search:true
-通过true
过滤器使严格匹配
就是这样。如果size.code
是uniqueID,我们将只有一个h1
元素的文本为size.name
。
我已经在我的项目中测试过了,它可以工作。
好运这是从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事件不能识别select中的选项项,所以我们使用ngModel从加载在控制器中的选项列表中过滤掉被选中的Item。
此外,由于事件是在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);
};