角度 ui 选择多个 ng 模型不会绑定？

我已经将模型绑定到UI选择，例如So

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

但是，在选择时，$scope.selectedPeople均未更新，也没有在手动更改数组时更新UI选择的选择。

请参阅此处的Plunker

我在这里要做的是在UI选择列表中编程添加一个项目。如何？

这是一个工作的plunker。

make selectedpeople 范围对象的属性：

$scope.test = {};

标记

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

...

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

"每当您拥有NG模型时，某个地方都会有一个点。如果您没有点，那就做错了。"-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 },
  ];
}

它是错误！使用这样的使用 ng-model =" someobject.selectedpeople" 每个解决方案！

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

工作demo

我以前完成此操作的方法是在UI-SELECT指令的链接函数中添加$ Watch功能：

UI选择指令来源：

 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 }
    ;
  }

现在在您的控制器$范围中，将您想推入UI选择的任何内容均为$scope.valToPush。

ui-select保存选定的物品的对象称为$ select.cepted。

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

相关内容

最新更新

热门标签：