Question

我想在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(',')，但所选数据还可以。

这是＆＃34;更大＆＃34;的一部分。 app，所以：

变量格式是这样的
$ scope.selected未在控制器中解析（拆分），因为在应用程序中，所选数据可以在其他情况下（开关）不受影响地使用，这与此处无关。

我希望能够解析部分中的selected.data，这可能吗？

谢谢

Answer 1

简短答案为否，您不能将selected.data.split(',')表达为ng-model属性。

您分配给ng-model的内容必须是＆＃34;可分配的角度表达式，以数据绑定到＆＃34;。

如果必须使用提供的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>

然后，您可以向$watch添加$scope.userselected - 侦听器，并在侦听器中为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);
  });
}]);

这是一个有效的Plunker

Answer 2

在ng-click内使用select-option，因此每当您选择选项值时，都会传递给ng-click函数。

并且无需在html中使用selected.data.split(',')。在Controller中使用它。

这是有效的plunker

<强>标记

<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可用作双向绑定。

多重选择设置会导致角度误差

2 个答案: