Skip to content
This repository was archived by the owner on Oct 2, 2019. It is now read-only.

Updating ng-model Variable From Controller Emptys Array #351

Closed
thejourneydude opened this issue Oct 28, 2014 · 2 comments
Closed

Updating ng-model Variable From Controller Emptys Array #351

thejourneydude opened this issue Oct 28, 2014 · 2 comments

Comments

@thejourneydude
Copy link

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?

Plunkr

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: '[email protected]',    age: 43, country: 'Colombia' }]);
  };

  $scope.person = {};
  $scope.people = [
    { name: 'Adam',      email: '[email protected]',      age: 12, country: 'United States' },
    { name: 'Amalie',    email: '[email protected]',    age: 12, country: 'Argentina' },
    { name: 'Estefanía', email: '[email protected]', age: 21, country: 'Argentina' },
    { name: 'Adrian',    email: '[email protected]',    age: 21, country: 'Ecuador' },
    { name: 'Wladimir',  email: '[email protected]',  age: 30, country: 'Ecuador' },
    { name: 'Samantha',  email: '[email protected]',  age: 30, country: 'United States' },
    { name: 'Nicole',    email: '[email protected]',    age: 43, country: 'Colombia' },
    { name: 'Natasha',   email: '[email protected]',   age: 54, country: 'Ecuador' },
    { name: 'Michael',   email: '[email protected]',   age: 15, country: 'Colombia' },
    { name: 'Nicolás',   email: '[email protected]',    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}} &lt;{{$item.email}}&gt;</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>
@bashanam
Copy link

See ticket #333 - I posted workaround.

@wesleycho
Copy link
Contributor

Closing as a support issue.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@wesleycho @thejourneydude @bashanam