使用 ng-options 添加额外/默认选项

Question

我正在以角度形式构建一个标签管理器，它使用两个下拉菜单（在这个演示中是一个食物类别和一个特定项目）。 当用户选择一个食物类别时，项目下拉列表应该出现，并且当下拉列表选择了一个值时，我想要一个字符串以“：”的格式添加到我的标签列表中。 下面是代码：

应用程序.js

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope){

  $scope.tags = [];
  $scope.userCategory;
  $scope.userFood;
  $scope.primaryFoods = [
    {
        'id': 1,
        'parent_id': null,
        'name': 'Pizza'
    },
    {
        'id': 4,
        'parent_id': null,
        'name': 'Burgers'
    },
    {
        'id': 7,
        'parent_id': null,
        'name': 'Pasta'
    },
  ];
  $scope.secondaryFoods = [
    {
        'id': 2,
        'parent_id': 1,
        'name': 'Cheese Pizza'
    },
    {
        'id': 3,
        'parent_id': 1,
        'name': 'Combo Pizza'
    },
    {
        'id': 5,
        'parent_id': 4,
        'name': 'Cheese Burgers'
    },
    {
        'id': 6,
        'parent_id': 4,
        'name': 'Hamburgers'
    },
  ];

});

app.directive('doubleTagManager', function() {
  return {
    restrict: 'E',
    scope: {tags: '=', primary: '=', secondary: '=', userPrimary: '=', userSecondary: '='},
    templateUrl: 'double-tag-manager.html',
    link: function ($scope, $element) {
      var input = angular.element($element.find('select')[1]);
      // This adds the new tag to the tags array in '<Primary>: <Secondary>' format
      $scope.add = function() {
        var new_value = input[0].value;
        if ($scope.tags.indexOf(new_value) < 0) {
          $scope.tags.push($scope.userPrimary.name + ': ' + $scope.userSecondary.name);
        }
      };
      // This is the ng-click handler to remove an item
      $scope.remove = function (idx) {
          $scope.tags.splice(idx, 1);
      };
      input.bind( 'change', function (event) {
        $scope.$apply($scope.add);
      });
    }
  };
});

双标签管理器.html

<div class="row">
  <div class="col-md-6">
    <select name="uFoodsPrimary" id="foodPrimary" class="form-control"
            ng-model="userPrimary"
            ng-options="item.name for item in primary track by item.name" required>
      <option value="">Select a Food category!</option>
    </select>
  </div>
  <div class="col-md-6" ng-show="userPrimary">
    <select name="uFoodsSecondary" id="foodSecondary" class="form-control"
            ng-model="userSecondary"
            ng-options="item.name for item in (secondary | filter: {parent_id: userPrimary.id})
            track by item.name"
            required>
      <option value="">Select a Food sub-category!</option>
    </select>
  </div>
</div>
<div class="tags">
  <a ng-repeat="(idx, tag) in tags" class="tag" ng-click="remove(idx)">{{tag}}</a>
</div>

我想添加的是选择“所有食物”的能力，因此用户不需要单独选择所有项目，但我似乎无法弄清楚如何使用 ng-options 添加附加字段。

小提琴

奖励：如果选择了一个没有子项的类别，我希望它默认添加到标签列表中。

Answer 1

Erik，这是实现您的所有选择功能的修改后的代码。 此外，您可以进一步增强它以实现您的BONUS用例。

我建议使用现有的angularui-select2组件，而不是花费太多精力来以这种方式实现标记。 它还有很多其他选择。 它会让你的生活更轻松。

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.tags = []; $scope.sub_cat_show = false; $scope.all_sub_cat_show = false; $scope.userCategory; $scope.userFood; $scope.primaryFoods = [{ 'id': 0, 'parent_id': null, 'name': 'All Foods' }, { 'id': 1, 'parent_id': null, 'name': 'Pizza' }, { 'id': 4, 'parent_id': null, 'name': 'Burgers' }, { 'id': 7, 'parent_id': null, 'name': 'Pasta' }]; $scope.secondaryFoods = [ { 'id': 2, 'parent_id': 1, 'name': 'Cheese Pizza' }, { 'id': 3, 'parent_id': 1, 'name': 'Combo Pizza' }, { 'id': 5, 'parent_id': 4, 'name': 'Cheese Burgers' }, { 'id': 6, 'parent_id': 4, 'name': 'Hamburgers' }, ]; }); app.directive('doubleTagManager', function() { return { restrict: 'E', scope: { tags: '=', primary: '=', secondary: '=', userPrimary: '=', userSecondary: '=', sub_cat_show: '=', 'all_sub_cat_show': '=' }, template: "<div class='row'><div class='col-md-6'><select ng-change='primaryChange()' name='uFoodsPrimary' id='foodPrimary' class='form-control' ng-model='userPrimary' ng-options='item.name for item in primary track by item.name' required> <option value=''>Select a Food category!</option></select></div><div ng-show='sub_cat_show' class='col-md-6'><select ng-show='all_sub_cat_show' ng-change='secondaryChange()' name='uFoodsSecondary' id='foodSecondary' class='form-control' ng-model='userSecondary'" + //options code "ng-options='item.name for item in (secondary | filter: {parent_id: userPrimary.id}) track by item.name' required>" + //end options code "<option value=''>Select a Food sub-category!</option></select> <select ng-show='!all_sub_cat_show'><option value=''>Food all sub-category</option></select> </div></div><div><a ng-repeat='(idx, tag) in tags' class='tag' ng-click='remove(idx)'>{{tag}}</a></div>", link: function($scope, $element) { var primarySel = angular.element($element.find('select')[0]); var secondarySel = angular.element($element.find('select')[1]); // This adds the new tag to the tags array in '<Primary>: <Secondary>' format $scope.primaryChange = function() { $scope.tags = []; // reset $scope.sub_cat_show = primarySel[0].value?true:false; if (primarySel[0].value == 'All Foods') { $scope.all_sub_cat_show = false; angular.forEach($scope.primary, function(primary, index) { angular.forEach($scope.secondary, function(secondary, index) { if(secondary.parent_id==primary.id) $scope.tags.push(primary.name + ': ' + secondary.name); }); }); } else { $scope.all_sub_cat_show = true; } } $scope.secondaryChange = function() { var new_value = secondarySel[0].value; if ($scope.tags.indexOf(new_value) < 0) { $scope.tags.push(primarySel[0].value + ': ' + new_value); } }; // This is the ng-click handler to remove an item $scope.remove = function(idx) { $scope.tags.splice(idx, 1); }; } }; });

 <script src="https://code.angularjs.org/1.4.3/angular-animate.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> <!DOCTYPE html> <html > <head> <meta charset="utf-8" /> <title>AngularJS Demo</title> <script> document.write('<base href="' + document.location + '" />'); </script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <double-tag-manager tags="tags" primary="primaryFoods" secondary="secondaryFoods" user-primary="userCategory" user-secondary="userFood"> </double-tag-manager> </div> </body> </html>

Answer 2

在对堆栈溢出进行更多研究之后，最好的（也许是唯一的）解决方案是链接另一个过滤器，该过滤器将克隆过滤后的数组并取消移动另一个选项。

新过滤器：

app.filter('addAll', function () {
  return function(input) {
    // clone the array, or you'll end up with a new "None" option added to your "values"
    // array on every digest cycle.
    var newArray = input.slice(0);
    newArray.unshift({name: "All Foods"});
    return newArray;
  };
});

更新了 ng-options 标签：

ng-options="item.name for item in (secondary | filter: {parent_id: userPrimary.id} | addAll)
            track by item.name"

所以帖子

更新的小提琴