2017-01-26 2 views
0

フォーム上のエンティティに複数の値を割り当てる必要がある場合のソリューションの開発には、ほとんどの時間が費やされています。AngularJS Multiple Selectはあらかじめ選択されたオプションを表示していません

したがって、私は、QualityDataというエンティティがあり、このエンティティは異なるMechanismIdentifiersを持つことができます。

私が考えたベストソリューションは、multiple selectです。

すべてがうまくこれらのソリューションの両方を組み合わせた作品:

AngularJS selecting multiple options

Get value when selected ng-option changes

私は、選択されたオプションの配列にアクセスする私のエンティティに割り当て、等...しかし、私は "を持つことができます<option ng-repeat>またはng-optionsのような動的アプローチを使用するときに、選択フィールドでハイライトされる事前選択されたオプション(編集用のデータをロードするときにサーバーから来るオプション)を取得できないというマイナーなフォールバックoptiをハードコーディングする場合にのみ動作しますons。もう一つのバグは、あらかじめ選択された配列にあるものよりも多くの値を追加したい場合、ダイナミックなアプローチを使用するときに、その中に存在するすべての値を消去します。

マークアップ:

<select multiple ng-change="showAlert(selectedValues)" ng-model="selectedValues"> 
        <!--ng-options="resDatasIdOfMechanism as resDatasIdOfMechanism.name for resDatasIdOfMechanism in resDatasIdOfMechanisms track by resDatasIdOfMechanism.id" value="resDatasIdOfMechanism.id">--> 

        <option value="1">{{resDatasIdOfMechanisms[0].name}}</option> 
        <option value="2">{{resDatasIdOfMechanisms[1].name}}</option> 
        <option value="3">{{resDatasIdOfMechanisms[2].name}}</option> 
       </select> 

私がコメントされている行を使用しようとするとマークされたオプションが

コントローラを動作しないとき、それはだ:追加する

$scope.selectedAlready = [{id:1, name:"Based on Antibiogram"}]; 
      $scope.selectedMechanisms=[]; 
      $scope.resDatasIdOfMechanisms = [{id:1,name:"Based on Antibiogram"}, {id:2,name:"Molecular"}, {id:3,name:"Genetic"}]; 
      $scope.selected = $scope.selectedAlready; 

      $scope.selectedValues = []; 

      $scope.$watch('selected', function(nowSelected){ 
       $scope.selectedValues = []; 
       if(! nowSelected){ 
        return; 
       } 
       angular.forEach(nowSelected, function(val){ 
        $scope.selectedValues.push(val.id.toString()); 
        console.log("look"); 
       }); 
      }); 

      $scope.showAlert=function(listOfMultipleChoices){ 
       //alert(object); 
      } 

EDIT jsfiddleリンクは動作していますが、私はまだ元の質問に対する解決策を見つけていません:https://jsfiddle.net/StevenEvenSteven/ybapx09w/

答えて

1

コードに誤字があります。

は、私はあなたのjsfiddleをフォークしてきたし、あなたが期待どおりに動作しているあなたのコントローラの定義

fiddleApp.controller('myFiddle', ['$scope', function($scope) { 

'$scope'の後にコンマを追加します。

+0

私は誤字を見つけることができたら、私にしばらく時間と怒りを保存してくれてありがとう:) – Steven

+1

@スティーブンあなたは歓迎です –

関連する問題