Angular ui-select 多个 ng-model 不会绑定？答案

【问题标题】：Angular ui-select multiple ng-model won't bind?Angular ui-select 多个 ng-model 不会绑定？
【发布时间】：2025-12-06 09:50:01
【问题描述】：

我已经像这样将模型绑定到 ui-select

<ui-select multiple ng-model="selectedPeople" theme="bootstrap" style="width:300px;">

但是，$scope.selectedPeople 不会在选择时更新，也不会在手动更改数组时更新 ui-select 选项。

见plunker here

我在这里要做的是以编程方式在 ui-select 列表中添加一个项目。怎么做？

【问题讨论】：

您正在尝试从外部函数中推送选择，是吗？
是的，这就是我想做的事情
好的，检查我的答案...应该是你要找的。span>
“更改模型”似乎可以正常工作，而“附加”按钮则不行
您是要添加到选择中还是添加到选择中？还是两者兼而有之？

标签： javascript angularjs ui-select

【解决方案1】：

这是一个有效的Plunker。

使 selectedPeople 成为范围对象的属性：

$scope.test = {};

标记

<ui-select multiple ng-model="test.selectedPeople" theme="bootstrap" style="width:300px;">

...

<pre>{{ test.selectedPeople }}</pre>

“只要你有 ng-model，就一定会有一个点。如果你没有一个点，那你就做错了。” - http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html

编辑：更改模型进行此更改：

$scope.test = function() {
  $scope.people = [
    { name: 'A',    email: 'a@email.com',    age: 10 },
    { name: 'B',    email: 'b@email.com',    age: 12 },
  ];
}

【讨论】：

您的插件似乎不起作用，单击按钮对我没有任何影响
嗯，我仍然看不到选择中出现的值，它们只是添加到模型对象中
@camden_kid 朋克视图不显示推送的项目，尽管模型已正确更新
@CarlosBarcelona 你能解释一下你的意思吗？单击“更改模型”确实会更改输入中的选项。
@camden_kid，单击“更改模型”后，无论在选择框中还是在“选定人员内容”中都没有任何反应。单击“附加某些项目”确实会将值推送到内容中，但不会推送到选择框中。我已经在 Chrome（Mac 和 Windows）上测试过

【解决方案2】：

这是错误！像这样使用 ng-model="someObject.selectedPeople" 解决所有问题！

$scope.someObject = {
   selectedPeople: []
};

【讨论】：

【解决方案3】：

Working Demo

我之前实现的方法是在 ui-select 指令的链接函数中添加一个 $watch 函数，最后：

ui-select 指令来源：

 scope.$watch(function() {
      return scope.$parent.valToPush;
      }, function(newVal) {
        $select.selected.push(newVal);
    })

控制器：

$scope.test = function() {
    $scope.valToPush = 
      { name: 'A',    email: 'a@email.com',    age: 10 }
    ;
  }

现在在您的控制器 $scope 中，将您想要推送到 ui-select 中的任何内容分配给 $scope.valToPush。

ui-select 保存所选项目的对象称为 $select.selected，因此最终必须放置您想要显示的任何内容。

【讨论】：

【解决方案4】：

为了使其工作，您必须使用controllerAs 语法，或者将您的模型封装在控制器中的对象中。见片段：

angular.module('myApp',['ui.select']).controller('MyController', function ($scope) {
  console.log("mycontroller");
  $scope.myUiSelect={model:{}}; // encapsulate your model inside an object.
  $scope.availableData=["a","b","c"]; //some random options
  $scope.onDatasetChanged = function(){
//    console.log("selected data",$scope.myUiSelect);
  }
});

<link href="https://rawgit.com/angular-ui/ui-select/master/dist/select.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/angular-ui/ui-select/master/dist/select.js"></script>
<body ng-app="myApp" ng-controller="MyController">
  <ui-select multiple ng-model="myUiSelect.model" close-on-select="false" title="Choose a dataset" ng-change="onDatasetChanged()">
    <ui-select-match placeholder="Select something">{{$item.label}}</ui-select-match>
      <ui-select-choices repeat="data in availableData | filter:$select.search">
                        {{data}}
      </ui-select-choices>
  </ui-select>
  <p>{{myUiSelect}}</p> <!-- Print your model stored inside myUiSelect object -->
</body>

【讨论】：