我正在尝试根据所选的下拉选项显示或隐藏字段。此外，如果该字段处于事件状态，则该选项不应显示在“添加过滤器”下拉列表中。 我创建了一个 plunker here .
根据我目前所做的，如果我单击删除字段按钮 (x)，该字段将被隐藏，但是当我从添加过滤器选项中添加该字段并尝试再次删除它时，它不起作用. 我不确定我这样做是否正确，我觉得应该有更好的方法来实现这一目标。 有人可以帮忙吗？
Controller
angular.module('app', [])
.controller('Main', ['$scope', function($scope) {
$scope.title = "hello";
$scope.isName = true;
$scope.isDropdown = true;
$scope.hideName = function() {
$scope.isName = false;
$scope.removeFilterOption($scope.isName);
};
$scope.hideDropdown = function() {
$scope.isDropdown = false;
};
$scope.removeFilterOption = function(value) {
if (value != $scope.isName) {
$scope.add_options.splice(1, 1);
} else {
$scope.add_options.splice(1, 0, {
text: "Name",
value: "name"
});
}
};
$scope.add_options = [];
$scope.add_filter = $scope.add_options[0];
$scope.selected = function(value) {
if (value === "name") {
$scope.isName = true;
} else if (value === "cars") {
$scope.isDropdown = true;
}
}
}]);
模板
<body ng-controller="Main">
{{title}}
<div ng-show="isName">
<label> Name
<span>
<button ng-click="hideName()">×</button>
</span>
</label>
<div>
<input/>
</div>
</div>
<div ng-show="isDropdown">
<label> Cars
<span>
<button ng-click="hideDropdown()">×</button>
</span>
</label>
<div>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
</div>
<div>
<h5>Add filter</h5>
<select
ng-model="add_filter" ng-selected="selected(add_filter.value)"
ng-options="x.text for x in add_options track by x.value">
</select>
</div>
</body>
最佳答案
如果您删除跟踪，这将非常简单。只需考虑 ng-show 和 ng-hide 即可。查看下面的代码。您基本上只是正确使用了 ng-show 和 ng-hide 。与其他方法相比，此示例更易于遵循。你只需要记住在正确的地方显示隐藏的东西。
angular.module('app', [])
.controller('Main', ['$scope', function($scope) {
$scope.title= "hello";
$scope.isName = true;
$scope.isCar = true;
$scope.hideName = function() {
$scope.isName = false;
};
$scope.hideCar = function() {
$scope.isCar = false;
};
$scope.getOption = function() {
var selected = $scope.selected;
switch(selected) {
case "Name":
$scope.isName = true;
break;
case "Cars":
$scope.isCar = true;
break;
}
$scope.selected = ""; // Reset Drop down
}
}]);<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="Main">
{{title}}
<div ng-show="isName">
<label> Name
<span>
<button ng-click="hideName()">×</button>
</span>
</label>
<div>
<input/>
</div>
</div>
<div ng-show="isCar">
<label> Cars
<span>
<button ng-click="hideCar()">×</button>
</span>
</label>
<div>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
</div>
<h5>Add filter</h5>
<select ng-model="selected" ng-change="getOption()">
<option value=""> </option>
<option ng-hide="isName" value="Name">Name</option>
<option ng-hide="isCar" value="Cars">Cars</option>
</select>
</body>
</html>关于javascript - 根据 Angularjs 中的选择选项添加或删除字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46776109/