我正在使用两个下拉菜单（在此演示中为食物类别和特定项目）构建一个角形式的标记管理器。当用户选择食物类别时，项目下拉列表应该出现，当该下拉列表中选择了一个值时，我想要一个以“：”格式添加到我的标签列表中的字符串。以下是代码：
app.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);
});
}
};
});
双标签的manager.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添加其他字段。
BONUS：如果选择了没有孩子的类别，我希望它默认添加到标签列表中。
答案 0 :(得分：1)
埃里克 以下是修改后的代码，以实现您的所有选择功能。此外，您可以进一步增强它以实现 BONUS 用例。
我建议使用现有的angularui-select2组件，而不是过多努力以这种方式实现标记。它还有很多其他选择。它会让你的生活更轻松。
/usr/local/Library/Homebrew/global.rb:48:in `split': invalid byte sequence in UTF-8 (ArgumentError)
from /usr/local/Library/Homebrew/global.rb:48:in `<top (required)>'
from /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/rubygems/core_ext/kernel_require.rb:55:in `require'
from /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/rubygems/core_ext/kernel_require.rb:55:in `require'
from /usr/local/Library/brew.rb:15:in `<main>'
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);
};
}
};
});
答案 1 :(得分：0)
在查看堆栈溢出之后，最好的（也许是唯一的）解决方案是链接另一个过滤器，它将克隆过滤后的数组并取消另一个选项。
新过滤器：
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"