2

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

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

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

在这里看到plunker

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

4

4 回答 4

7

这是一个正在工作的Plunker。

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

JS

$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 },
  ];
}
于 2015-05-02T11:29:27.890 回答
1

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

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

于 2015-05-18T09:40:44.480 回答
0

工作演示

我之前完成此操作的方法是在 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，因此最终必须放置您想要显示的任何内容。

于 2015-05-02T11:36:11.360 回答
0

为了使其工作，您必须使用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>

于 2016-12-22T09:02:30.913 回答