7

「黄色を選択」ボタンをクリックすると、選択したリストに黄色を追加したいと思います。黄色が選択されていますが、ドロップダウンにはまだ黄色が表示されています。同様に、「黄色の選択を解除」ボタンをクリックして黄色の選択を解除したい。黄色の選択を解除できますが、ドロップダウンに黄色が表示されません。この問題で私を助けてください。HTML:

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

    <input type="button" value="select yellow color" ng-click="selectYellowColor()"/>
    <input type="button" value="deselect yellow color" ng-click="deselectYellowColor()"/>

JS:

  $scope.availableColors = ['Red','Green','Blue','Yellow','Magenta','Maroon','Umbra','Turquoise'];
  $scope.multipleDemo = {};
  $scope.multipleDemo.colors = ['Blue','Red'];

  $scope.selectYellowColor = function(){
    if($scope.multipleDemo.colors.indexOf($scope.availableColors[3]) == -1){
      $scope.multipleDemo.colors.push($scope.availableColors[3]);
    }
  };

  $scope.deselectYellowColor = function(){
    if($scope.multipleDemo.colors.indexOf($scope.availableColors[3]) != -1){
      var index = $scope.multipleDemo.colors.indexOf($scope.availableColors[3]);
      $scope.multipleDemo.colors.splice(index, 1);
    }
  };

ここにプランカーのリンクがあります http://plnkr.co/edit/AHZj1zAdOXIt6gICBMuN?p=preview

4

1 に答える 1