Search code examples
angularjsangularjs-directiveangularjs-scopeangular-ui-bootstrapangular-ui

how to select value in UI select value?


could you please tell me how to select value in UI-select value ?

Actually when user select any name I want to select age of item .Here is my code http://plnkr.co/edit/InxOyQRjrlrDJtx2VuzI?p=preview

<ui-select tagging tagging-label="new tag" multiple ng-model="multipleDemo" theme="select2" ng-disabled="disabled" style="width: 300px;">
    <ui-select-match placeholder="Select colors...">{{$item.name}}</ui-select-match>
    <ui-select-choices repeat="color in people | filter:$select.search">
      {{color.name}}
    </ui-select-choices>
  </ui-select>

Example

when I select Amalie multipleDemo model value is 12 or if I select Wladimir is model value "30".. it is multiple selected so model should be array ..

can we do this ?


Solution

  • UI Changes just add on-select="OnClickSelect($item)" and on-remove="OnRemoveSelect($item)" on ui-select

          <ui-select tagging tagging-label="new tag" multiple ng-model="multipleDemo" 
              on-select="OnClickSelect($item)" on-remove="OnRemoveSelect($item)"
              theme="select2" ng-disabled="disabled" style="width: 300px;">
            <ui-select-match placeholder="Select colors...">{{$item.name}}</ui-select-match>
            <ui-select-choices  repeat="color in people | filter:$select.search">
              {{color.name}}
            </ui-select-choices>
          </ui-select>
          <p>Selected: {{multipleDemo}}</p>
    

    Angular Changes Add those functions inside controller

      $scope.OnClickSelect=function(item)   {
        $scope.multipleDemo.push(item.age)
      }
    
     $scope.OnRemoveSelect = function(item) { 
       var index = $scope.multipleDemo.indexOf(item.age);
       $scope.multipleDemo.splice(index, 1);     
     }
    

    plnkr