admin管理员组

文章数量:1405607

I've bound a model to an ui-select like so

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

However, neither the $scope.selectedPeople gets updated upon selection, nor the ui-select choices are updated when the array is manually changed.

See plunker here

What i'm trying to do here is to programmatically add an item in the ui-select listing. How to?

I've bound a model to an ui-select like so

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

However, neither the $scope.selectedPeople gets updated upon selection, nor the ui-select choices are updated when the array is manually changed.

See plunker here

What i'm trying to do here is to programmatically add an item in the ui-select listing. How to?

  • javascript
  • angularjs
  • ui-select
Share Improve this question asked May 2, 2015 at 11:02 brazorfbrazorf 1,9612 gold badges32 silver badges55 bronze badges 6
  • You are trying to push in a selection from an external function, yes? – tpie Commented May 2, 2015 at 11:18
  • Yes that's what i'm tring to do – brazorf Commented May 2, 2015 at 11:35
  • ok check my answer...should be what you are looking for. – tpie Commented May 2, 2015 at 11:36
  • The "alter model" seems to work fine, while the "append" button doesn't – brazorf Commented May 2, 2015 at 11:39
  • Are you wanting to add to the choices or add to the selection? or both? – tpie Commented May 2, 2015 at 11:40
 |  Show 1 more ment

4 Answers 4

Reset to default 7

Here's a working Plunker.

Make selectedPeople a property of a scope object:

JS

$scope.test = {};

Markup

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

...

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

“Whenever you have ng-model there’s gotta be a dot in there somewhere. If you don’t have a dot, you’re doing it wrong.” - http://jimhoskins./2012/12/14/nested-scopes-in-angularjs.html

Edit: to alter the model make this change:

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

it's bug! use like this ng-model="someObject.selectedPeople" every things solved! 

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

Working Demo

The way I have acplished this before is to add a $watch function inside the ui-select directive's link function, at the end:

ui-select directive source:

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

Controller:

$scope.test = function() {
    $scope.valToPush = 
      { name: 'A',    email: '[email protected]',    age: 10 }
    ;
  }

Now in your controller $scope, assign whatever you want to push into the ui-select to $scope.valToPush.

The object that ui-select holds selected items in is called $select.selected, so that's ultimately where anything you want displayed has to be put.

In order to make it work, you have to use the controllerAs syntax, or encapsulate your model inside an object in your controller. See the Snippet:

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./angular-ui/ui-select/master/dist/select.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit./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>

本文标签： javascriptAngular uiselect multiple ngmodel won39t bindStack Overflow

版权声明：本文标题：javascript - Angular ui-select multiple ng-model won&#39;t bind? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744332683a2601039.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。