Javascript 如果特定元素ng选项列表与ng模型不匹配,如何删除该列表

Javascript 如果特定元素ng选项列表与ng模型不匹配,如何删除该列表,javascript,angularjs,angular-ngmodel,ng-options,Javascript,Angularjs,Angular Ngmodel,Ng Options,我正在尝试从选择下拉列表中删除一个特定元素,该列表是从ng选项中获取的 我通过ng模型将数据放到UI上,然后我想使用ng选项在下拉列表中显示这些数据 如果年龄不是0,我正在尝试从列表中删除“无最低年龄”选项 <select name="ageField" ng-model="minAge" ng-options="minAge.value as minAge.key for minAge in minAgeList"> 参考: 在本例中,我在控制器中将minAge设置为0,但如果数

我正在尝试从选择下拉列表中删除一个特定元素,该列表是从ng选项中获取的

我通过ng模型将数据放到UI上,然后我想使用ng选项在下拉列表中显示这些数据

如果年龄不是0,我正在尝试从列表中删除“无最低年龄”选项

<select name="ageField" ng-model="minAge" ng-options="minAge.value as minAge.key for minAge in minAgeList">
参考:


在本例中,我在控制器中将minAge设置为0,但如果数据不是0,我想从列表中删除无最小年龄选项。

将最小年龄值传递给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函数,并在将值推送到数组之前检查该值

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);

请参见此处:

无需更改minAgeData工厂。只需在控制器中获取一片minAgeData:

// skip index 0 if `minAge` is not 0
var startIndex = $scope.minAge !== 0 ? 1 : 0;
$scope.minAgeList = dataFact.dataDetails.minAgeData().slice(startIndex);

请参见此处:

在选择标记内尝试使用选项标记,并根据条件ng show、ng if to show hide option下拉列表

我希望它可以解决您的问题,您可以通过基于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>

对不起,英语不好

尝试在选择标记内使用选项标记,并根据条件ng show、ng if to show hide option下拉列表

我希望它可以解决您的问题,您可以通过基于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>

对不起,英语不好

非常感谢您的解决方案。我刚刚想出了另外一个选择,使用nginit然后处理它。并直接在控制器中访问,而不是在服务中访问。非常感谢您提供的解决方案。我刚刚想出了另外一个选择,使用nginit然后处理它。直接在控制器中访问,而不是在服务中访问。仅举个例子,我只是使用minAge数据作为硬编码值,我期待来自服务API的数据,我不确定我将获得什么数据。这个解决方案也起了作用:感谢您的建议如果minAge为0,这个代码段将把minAgeList设置为完整数组,如果minAge不是0,它将跳过第一个元素。它并不假设知道minAge将是什么。非常好,感谢您添加了plnkr,现在更有意义了:我尝试使用ng init来实现它,方法是传入ng模型值,然后在控制器中以$scope.minAgeList.0,1的形式访问该服务列表;仅出于示例目的,我只是使用minAge数据作为硬编码值,我期望来自服务API的数据,我不确定我将获得什么数据。这个解决方案也起了作用:感谢您的建议如果minAge为0,这个代码段将把minAgeList设置为完整数组,如果minAge不是0,它将跳过第一个元素。它并不假设知道minAge将是什么。非常好,感谢您添加了plnkr,现在更有意义了:我尝试使用ng init来实现它,方法是传入ng模型值,然后在控制器中以$scope.minAgeList.0,1的形式访问该服务列表;