如果特定元素 ng-option 列表与 ng-model 不匹配,如何删除它
How to Remove specific element ng-option list if it's not matching ng-model
我正在尝试从 Select 从 ng-options 中获取的下拉列表中删除特定元素。
我通过 ng-model 将数据获取到 UI,然后我想使用 ng-options 在下拉列表中显示该数据。
如果年龄不为 0,我正在尝试从列表中删除 "No Minimum Age" 选项。
<select name="ageField" ng-model="minAge" ng-options="minAge.value as minAge.key for minAge in minAgeList">
参考:http://embed.plnkr.co/83NKDa/
在这个例子中,我在控制器中将 minAge 设置为 0,但如果数据不是 0,我想从列表中删除 No Minimum Age 选项。
将最小年龄值传递给 minAgeData
函数并在将值推送到数组之前检查该值。
var app = angular.module('myApp', []);
app.controller('demoCtrl', function ($scope, $http, dataFact) {
$scope.minAge = 1;
$scope.maxAge = 99;
**$scope.minAgeList = dataFact.dataDetails.minAgeData($scope.minAge);**
});
app.factory('dataFact', dataFact);
function dataFact() {
var minAgeData = function (pValue) {
var minAgeArray = [];
**if (!pValue){
minAgeArray.push({
"value": 0,
"key": "No Minimum Age"
});
}**
for (var i = 1; i <= 115; i++) {
var label = i;
if (i < 10) {
label = "0" + i;
}
minAgeArray.push({
"value": i,
"key": label
})
}
return minAgeArray;
};
var service = {
dataDetails: {
minAgeData: minAgeData
}
}
return service;
}
无需更改 minAgeData 工厂。只需在您的控制器中取一片 minAgeData() 即可:
// skip index 0 if `minAge` is not 0
var startIndex = $scope.minAge !== 0 ? 1 : 0;
$scope.minAgeList = dataFact.dataDetails.minAgeData().slice(startIndex);
尝试在 select 标签内使用选项标签,并根据条件 ng-show 、 ng-if 显示隐藏选项下拉列表。
我希望它能解决您的问题,您可以根据 minAgeList 值传递 ng-show 值,从 minAgelist 中删除第一个对象选项并输入您想要的有效有效值。
<select name="ageField" ng-model="minAge" ng-options="minAge.value as minAge.key for minAge in minAgeList">
<option ng-show="false" value="">-- choose an option --</option>
</select>
抱歉英文不好 ;)
我正在尝试从 Select 从 ng-options 中获取的下拉列表中删除特定元素。
我通过 ng-model 将数据获取到 UI,然后我想使用 ng-options 在下拉列表中显示该数据。
如果年龄不为 0,我正在尝试从列表中删除 "No Minimum Age" 选项。
<select name="ageField" ng-model="minAge" ng-options="minAge.value as minAge.key for minAge in minAgeList">
参考:http://embed.plnkr.co/83NKDa/
在这个例子中,我在控制器中将 minAge 设置为 0,但如果数据不是 0,我想从列表中删除 No Minimum Age 选项。
将最小年龄值传递给 minAgeData
函数并在将值推送到数组之前检查该值。
var app = angular.module('myApp', []);
app.controller('demoCtrl', function ($scope, $http, dataFact) {
$scope.minAge = 1;
$scope.maxAge = 99;
**$scope.minAgeList = dataFact.dataDetails.minAgeData($scope.minAge);**
});
app.factory('dataFact', dataFact);
function dataFact() {
var minAgeData = function (pValue) {
var minAgeArray = [];
**if (!pValue){
minAgeArray.push({
"value": 0,
"key": "No Minimum Age"
});
}**
for (var i = 1; i <= 115; i++) {
var label = i;
if (i < 10) {
label = "0" + i;
}
minAgeArray.push({
"value": i,
"key": label
})
}
return minAgeArray;
};
var service = {
dataDetails: {
minAgeData: minAgeData
}
}
return service;
}
无需更改 minAgeData 工厂。只需在您的控制器中取一片 minAgeData() 即可:
// skip index 0 if `minAge` is not 0
var startIndex = $scope.minAge !== 0 ? 1 : 0;
$scope.minAgeList = dataFact.dataDetails.minAgeData().slice(startIndex);
尝试在 select 标签内使用选项标签,并根据条件 ng-show 、 ng-if 显示隐藏选项下拉列表。
我希望它能解决您的问题,您可以根据 minAgeList 值传递 ng-show 值,从 minAgelist 中删除第一个对象选项并输入您想要的有效有效值。
<select name="ageField" ng-model="minAge" ng-options="minAge.value as minAge.key for minAge in minAgeList">
<option ng-show="false" value="">-- choose an option --</option>
</select>
抱歉英文不好 ;)