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?
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.com/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: []
};The way I have accomplished 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.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>