Changing Scope Variable in Controller Doesn't Change Variable in View
Question
I'm using Select2 with AngularJS and I want to change the ng-model associated with the select box in the controller. Currently in my plunkr example whenever I update the ng-model, the select2 box clears, as if I reset the ng-model to an empty array. How do I set it to so that I can first add a person, then initiate a function in the controller to add more selections to the select box, and then see both the original selection and the new selections in the box?
JS Controller
app.controller('DemoCtrl', function($scope, $http, $timeout) {
$scope.addSomePeeps = function() {
var peeps = angular.copy($scope.multipleDemo.selectedPeople)
$scope.multipleDemo.selectedPeople = peeps.concat([{ name: 'Nicolás', email: 'nicole@email.com', age: 43, country: 'Colombia' }]);
};
$scope.person = {};
$scope.people = [
{ name: 'Adam', email: 'adam@email.com', age: 12, country: 'United States' },
{ name: 'Amalie', email: 'amalie@email.com', age: 12, country: 'Argentina' },
{ name: 'Estefanía', email: 'estefania@email.com', age: 21, country: 'Argentina' },
{ name: 'Adrian', email: 'adrian@email.com', age: 21, country: 'Ecuador' },
{ name: 'Wladimir', email: 'wladimir@email.com', age: 30, country: 'Ecuador' },
{ name: 'Samantha', email: 'samantha@email.com', age: 30, country: 'United States' },
{ name: 'Nicole', email: 'nicole@email.com', age: 43, country: 'Colombia' },
{ name: 'Natasha', email: 'natasha@email.com', age: 54, country: 'Ecuador' },
{ name: 'Michael', email: 'michael@email.com', age: 15, country: 'Colombia' },
{ name: 'Nicolás', email: 'nicolas@email.com', age: 43, country: 'Colombia' }
];
$scope.multipleDemo = {};
$scope.multipleDemo.selectedPeople = [$scope.people[5], $scope.people[4]];
});
HTML
<body ng-controller="DemoCtrl">
<h3>Array of objects</h3>
<ui-select multiple ng-model="multipleDemo.selectedPeople" theme="select2" ng-disabled="disabled" style="width: 800px;">
<ui-select-match placeholder="Select person...">{{$item.name}} <{{$item.email}}></ui-select-match>
<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
<div ng-bind-html="person.name | highlight: $select.search"></div>
<small>
email: {{person.email}}
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
</small>
</ui-select-choices>
</ui-select>
<p>Selected: {{multipleDemo.selectedPeople}}</p>
<button ng-click="addSomePeeps()">Click me to add some specific peeps</button>
</body>
1 answers
solution1
0 2014-11-13 19:38:54
$scope.$watch('multipleDemo',function(newValue,oldValue){
console.log("WATCH IN PROGRESS: "+newValue+" "+ oldValue);
});
This kind of fixed mine. I think watch function calls $scope.$apply which binds new value. I tried using $scope.$apply which worked but it threw an error.
Hope that helps
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.