2016-12-22 34 views
0

マルチ選択フォームで選択した値をui-selectから取得する方法についてはいくつか問題があります。 私はあなたに何をしたいのかを示すスニペットを作った。私のHTMLでは、変更イベントのコールバックを使用してui-selectを作成しました:ng-change="onDatasetChanged(whatShouldBehere?)"。このオプションを選択すると、コントローラのonDatasetChanged() -methodの中でのみ、選択したモデルを印刷します。 on-select="onSelect($item, $model)"選択したオプションを複数選択する方法

答えて

0

angular.module('myApp',['ui.select']).controller('MyController', function ($scope) { 
 
    
 
    $scope.myUiSelect={model:{}}; // encapsulate your model inside an object. 
 
    $scope.availableData=["a","b","c"]; //some random options 
 
    
 
    $scope.onDatasetChanged = function(selectedValue){ 
 
    console.log("selectedValue",selectedValue); 
 
    } 
 
    
 
});
<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(whatShouldBehere?)"> 
 
    <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> 
 
    
 
    
 
    
 
</body>

ui-select-directive のリポジトリページ上の研究のビットの後、私はあなたがこのように結合 on-selectイベントを使用することができます考え出しました。

angular.module('myApp',['ui.select']).controller('MyController', function ($scope) { 
 
    
 
    $scope.myUiSelect={model:{}}; // encapsulate your model inside an object. 
 
    $scope.availableData=["a","b","c"]; //some random options 
 
    
 
    $scope.onSelect = function(item,model){ 
 
    console.log("selectedItem",item); 
 
    } 
 
    
 
});
<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" on-select="onSelect($item, $model)"> 
 
    <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> 
 
    
 
    
 
    
 
</body>

:更新されたスニペットを参照してください。
関連する問題