我想在AngularJS中简单地选择多个选项。
偏边:
<select name="usergroup"
ng-model="selected.data.split(',')"
ng-options="k as v for (k, v) in usergroup"
multiple>
</select>
和控制器端:
$scope.selected = {data:"1,3"};
$scope.usergroup = {"1":"groupe 1","2":"groupe 2","3":"groupe 3"};
这是plunkr:我不明白为什么我在控制台有所有这些js错误,虽然显示是正确的:选择的选项是好的。
从错误看来,我不能使用selected.data.split(',')
,但所选数据是ok的。
这是一个"更大"的应用程序的一部分,所以:
- 变量格式像这样是有原因的
- 美元范围。在控制器中,被选中的数据不会被解析(拆分),因为在应用程序中,被选中的数据可以在其他情况下(开关)原原本本地使用,而这些情况与这里无关。
我希望能够解析所选的。数据在局部,这是可能的吗?
谢谢
简短的回答是不可以,您不能将表达式selected.data.split(',')
作为ng-model
属性。
你给ng-model
赋值的必须是一个"可赋值的角度表达式来进行数据绑定"。
如果你必须使用提供的selected.data
字符串作为对象,你可以使用另一个临时变量,例如$scope.userselected
,它包含一个数组与选择的值。
<body ng-app="app" ng-controller="testController">
<select name="usergroup"
ng-model="userselected"
ng-options="k as v for (k, v) in usergroup"
multiple>
</select>
</body>
然后,您可以向$scope.userselected
添加$watch
侦听器,并在侦听器中为selected.data
分配正确的值:
app.controller('testController',['$scope', function($scope){
$scope.usergroup = {"1":"groupe 1","2":"groupe 2","3":"groupe 3"};
$scope.selected = {data:"1,3"}
$scope.userselected = ["1", "3"];
$scope.$watch('userselected', function(value) {
$scope.selected.data = value.join(',');
console.log($scope.selected.data);
});
}]);
这是一个工作的活塞
在select-option
中使用ng-click
,因此每当您选择选项值时,将传递给ng-click
函数。
,不需要在html中使用selected.data.split(',')
。
这是工作活塞
标记
<select name="usergroup"
ng-model="selectedId"
ng-options="k as v for (k, v) in usergroup"
ng-click="selectedOption(selectedId)"
multiple>
</select>
Selected value : {{selected}}
Js
var app = angular.module('app',[]);
app.controller('testController',['$scope', function($scope){
// seleclted data
$scope.selected = {data:"1,3"};
// selected Ids
$scope.selectedId = $scope.selected.data.split(","); // pass selected ids
// userGroup
$scope.usergroup = {"1":"groupe 1","2":"groupe 2","3":"groupe 3"};
// ng-click function
$scope.selectedOption = function(data){
$scope.selected.data = data.toString();
}
}])
不需要手动设置watch
,因为ng-click是双向绑定的