4

次のコードで以前に解決された問題に対する同様の解決策を探しています。

http://jsfiddle.net/yLCVf/1/

これは、上記のJSFiddleから使用する必要があるJSです。

$(document).ready(function () {
    $('select.hello').change(function () {
        $('select.hello option').attr('disabled', false);
        $('select.hello').each(function() {
            var val = $(this).find('option:selected').val();
            if (!val) return;
            $('select.hello option').filter(function() {
                return $(this).val() == val;
            }).attr('disabled', 'disabled');
        });
    });
});

ただし、これはAngularJSで行う必要があり、AngularJSの初心者であるため、一部のJSをAngularJSシードに「変換」する方法に少し困惑しており、少しのガイダンスが必要です。

基本的に、同じリスト（人のリスト）を含む3つの選択ドロップダウンがあります。ユーザーが最初の選択に名前を選択した場合、その名前を他の2つの選択オプションから削除する必要があります。上記のJSfiddleはこれを完全に示していますが、このコードをAngularJSに配置する方法を理解する必要があります。

前もって感謝します。

4

3 に答える 3

8

これを行う1つの方法を示すフィドルを次に示します。http：//jsfiddle.net/Zv5NE/4/ jQueryの例のように無効にするのではなく、他のリストから削除するだけです。それらを無効にしたい場合は（私は思う）、それを適切な角度で行うためにディレクティブを使用する必要があります。ドキュメントを確認することもできます：http ：//docs.angularjs.org/api/ng.directive：select

スニペットは次のとおりです。

  <select 
    ng-model="selectname1" 
    ng-options="item as item.name for item in friends|filter:filter2|filter:filter3" >
    <option value="">- select -</option>
  </select>

   <select 
     ng-model="selectname2" 
     ng-options="item as item.name for item in friends|filter:filter1|filter:filter3" >
     <option value="">- select -</option>
   </select>

まず、ng-modelを使用して、selectがバインドする値を設定します。これにより、モデル（コントローラーで定義）に何が選択されているかが通知され、デフォルトを設定するためにも使用できます。次に、ng-optionsディレクティブを使用して、表示するオプションとそれらをフィルタリングする方法を指定します。オプションは、コントローラーで配列として定義されます。したがって、「friendsのitemのitem as item.name」というステートメントは、配列friendsの各アイテムにitem.nameというラベルの付いたitemの値を使用することを意味します。オプションとフィルターはモデルで定義されています。

selectname2では、「friends | filter：filter1」のような友達用のフィルターを使用します。filter1は、表示するアイテムを決定するコントローラーで定義された関数です。このフィルターは、idがselectname1と一致するアイテムに対してはfalseを返し、それ以外の場合はtrueを返します。

function HelloCntl($scope) {
    $scope.selectname1={};    
    $scope.selectname2={};    
    $scope.selectname3={};

    $scope.filter1 = function(item){
      return (!($scope.selectname1&&$scope.selectname1.id)||item.id !=$scope.selectname1.id);
    };

    $scope.filter2 = function(item){
      return (!($scope.selectname2&&$scope.selectname2.id)||item.id!=$scope.selectname2.id);
    };
    $scope.filter3 = function(item){
      return (!($scope.selectname3&&$scope.selectname3.id)||item.id !=$scope.selectname3.id);
    };
    $scope.friends = [
      {
        id:1,name: 'John',
        phone: '555-1276'},
      {
        id:2,name: 'Mary',
        phone: '800-BIG-MARY'},
      {
        id:3,name: 'Mike',
        phone: '555-4321'},
      {
        id:4,name: 'Adam',
        phone: '555-5678'},
      {
        id:5,name: 'Julie',
        phone: '555-8765'}
    ];
}

お役に立てば幸いです

于 2013-02-10T00:13:25.290 に答える
1

これがあなたが探しているもののプランカーの例です。選択リストは、他の選択に基づいて自動的に変更されます。

http://plnkr.co/edit/yFrYQ1ql9a1x9jd9yGv0

n個のリストを一般化して、変更がないかすべてをループすることができます。

    <!DOCTYPE html>
<html ng-app="angularjs-starter">

  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <h1>Hello {{name}}</h1>
    <p>
      First List: <select ng-change="onChange()" ng-options='person.name for person in  first.list | filter:{selected: false}' ng-model='first.option'><option value="">-- pick one --</option>  </select> {{first.option.name}}
    </p>
    <p>
      Second List: <select ng-change="onChange()" ng-options='person.name for person in  second.list | filter:{selected: false}' ng-model='second.option'><option value="">-- pick one --</option></select> {{second.option.name}}
    </p>
    <p>
      Third List: <select ng-change="onChange()" ng-options='person.name for person in  third.list | filter:{selected: false}' ng-model='third.option'><option value="">-- pick one --</option></select> {{third.option.name}}
    </p>
    </select>
  </body>

</html>

角度コード

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.masterlist = 
      [ {name: 'John', selected: false}, {name: 'Bill', selected: false},
        {name: 'Smith', selected: false}, {name: 'Alex', selected: false},
        {name: 'Martin', selected: false}, {name: 'James', selectes: false}];

  $scope.first = {list: angular.copy($scope.masterlist), option: null};
  $scope.second = {list: angular.copy($scope.masterlist), option: null};
  $scope.third = {list: angular.copy($scope.masterlist), option: null};

  $scope.onChange = function(){
    $scope.enableAllOptions($scope.first.list);
    $scope.enableAllOptions($scope.second.list);
    $scope.enableAllOptions($scope.third.list);

    $scope.disableOptions($scope.first.list, $scope.second.list, $scope.second.option);
    $scope.disableOptions($scope.first.list, $scope.third.list, $scope.third.option);

    $scope.disableOptions($scope.second.list, $scope.first.list, $scope.first.option);
    $scope.disableOptions($scope.second.list, $scope.third.list, $scope.third.option);

    $scope.disableOptions($scope.third.list, $scope.first.list, $scope.first.option);
    $scope.disableOptions($scope.third.list, $scope.second.list, $scope.second.option);
  };

  //Enable all options by default.
  $scope.enableAllOptions = function(arr)
  {
    for(var i=0;i<arr.length;i++)
    {
      arr[i].selected = false;
    }
  };

  //Function that takes the destinationArr , Source Arry , and Source selected item
  $scope.disableOptions = function(destArr, srcArr, srcItem)
  {
    if(srcItem !== null)
    {
      var index = srcArr.indexOf(srcItem);
      if(index >=0) destArr[index].selected = true;
    }
  };

});
于 2013-02-10T00:28:23.847 に答える
0 
$scope.filesList    = FileService.getFiles();
$scope.listsList    = [];
$scope.items = ['settings', 'home', 'other'];
$scope.selection = $scope.items[0];
//esse scope file options mudará depois vou pegar diretamente do banco.
$scope.filesOptions = [
    {
        'filetype'  : 1,
        'filelabel' : 'OPÇÃO A',
        'selected'  : false
    },
    {
        'filetype'  : 2,
        'filelabel' : 'OPÇÃO B',
        'selected'  : false
    },
    {
        'filetype'  : 3,
        'filelabel' : 'OPÇÃO C',
        'selected'  : false
    },
    {
        'filetype'  : 4,
        'filelabel' : 'OPÇÃO D',
        'selected'  : false
    },
    {
        'filetype'  : 5,
        'filelabel' : 'OPÇÃO E',
        'selected'  : false
    }
];

 for (index = 0; index < $scope.filesList.length; ++index) {

$scope.listsList.push({list: angular.copy($scope.filesOptions), option: null});}

$scope.onChange = function(){
    //tgt.selected = true;
    for (var i = 0; i < $scope.listsList.length; ++i) {
        var current = $scope.listsList[i];
        $scope.enableAllOptions(current.list);
        for (var j = 0; j < $scope.listsList.length; ++j) {
            if(current != $scope.listsList[j]){
                $scope.disableOptions(current.list, $scope.listsList[j].list, $scope.listsList[j].option);
            }
        }
    }
};
//Enable all options by default.
$scope.enableAllOptions = function(arr){ for(var i=0;i<arr.length;i++){ arr[i].selected = false;} };
//Function that takes the destinationArr , Source Arry , and Source selected item
$scope.disableOptions = function(destArr, srcArr, srcItem) {
    if(srcItem !== null) {
        var index = srcArr.indexOf(srcItem);
        if(index >=0) destArr[index].selected = true;
    }
};


<div class="col-md-9"><select ng-change="onChange()" ng-options='op.filelabel for op in  listsList[$index].list | filter:{selected: false}' ng-model='listsList[$index].option'>

一つを選ぶ

于 2015-10-23T18:43:44.687 に答える