多重选择设置导致angular出错

multiple select setup causes error in angular

本文关键字：angular 出错 设置 选择      更新时间：2023-09-26

我想在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是双向绑定的

相关文章：