AngularJS删除&如果其他选择更改，请添加选择框选项 [英] AngularJS remove & add select box option if other selection changes

问题描述

我正在寻找类似于问题的解决方案之前已使用以下代码解决：

I'm looking for a similar solution to a problem that has been resolved before with the following code:

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

这是我需要从上面的JSFiddle中使用的JS ：

This is the JS that I'm needing to use from the above JSFiddle:

$(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 Seed而只需要一些指导。

However, I need to do this in AngularJS, and being a newbie to AngularJS I'm a bit stumped how to "convert" some JS into AngularJS Seed and just need a little bit of guidance.

基本上我有3个选择下拉列表，其中包含相同的列表（它是人员列表），当用户为第一个选择选择名称时，我需要从其他2个选择选项中删除该名称。上面的JSfiddle完美地演示了这一点，但我只需要了解如何将此代码放入AngularJS。

Essentially I have 3 selection drop downs all which contain the same list (It's a list of people), when a user chooses a name for the first selection, I need that name to be removed from the other 2 selection options. The JSfiddle above demonstrates this perfectly, but I just need to understand how I should be placing this code into AngularJS.

提前致谢。

推荐答案

这是一个小提琴演示了一种方法： http： //jsfiddle.net/Zv5NE/4/
它不会像jQuery示例那样禁用它们，只是将它们从其他列表中删除。如果你想禁用它们，那么（我认为）你需要使用一个指令来正确的角度方式。您可能还需要查看文档： http://docs.angularjs.org/api/ng.directive:select

Here is a fiddle that demonstrates one way of doing this:http://jsfiddle.net/Zv5NE/4/ It does not disable them like the jQuery example, it just removes them from the other lists. If you want to disable them then(i think) you would need to use a directive to do it the proper angular way. You may also want to check the docs: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指令告诉要显示的选项以及如何过滤它们。选项定义为控制器中的数组。因此，声明item as item.name for friends in friends意味着使用item的值与数组friends中的每个项目的标签item.name。选项和过滤器在模型中定义。

First use ng-model to set the value that the select binds to. This tells the model(defined in the controller) what is selected and it can also be used to set a default. Then use the ng-options directive to tell what options to show and how to filter them. The options are defined as an array in the controller. So the statement "item as item.name for item in friends" means use the value of item with the label item.name for each item in the array friends. The options and filters are defined in the model.

在selectname2中，它为朋友使用过滤器，看起来像friends | filter：filter1。 filter1是控制器中定义的函数，用于确定要显示的项目。对于id与selectname1匹配的任何项，此过滤器只返回false，否则返回true。

in selectname2 it uses the filter for friends which looks like "friends|filter:filter1". filter1 is a function defined in the controller that determines which items to show. This filter just returns false for any item whose id matches selectname1 and true otherwise.

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'}
    ];
}

希望有帮助

这篇关于AngularJS删除&如果其他选择更改，请添加选择框选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！