Question

我想从使用ng-options的选择列表中删除/隐藏一些选项。在我的列表中，我有18个项目，我只想从列表中删除其中的6个但不删除它们（它们在我的数据库中用于其他地方）。我不希望用户能够在此列表中看到它们。有没有办法循环使用ng-options隐藏它们？

在我的HTML中

<div class="col-xs-12 col-md-{{model.data.colSize}}" ng-show="model.data.passionPointFilter">
            <select class="region-filter form-control"
                    ng-model="model.selections.passionPoint" ng-options="item.id as item.title for item in model.passionPoints.items">
                <option value="">All Interest</option>
            </select>
        </div>

在我的控制器中：

if (model.data.passionPointFilter) {
            txThingsToDo.loadAll().then(function (thingstodo) {
                model.passionPoints.loading = false;
                model.passionPoints.items = thingstodo.results;
            });

我想删除例如最后3个

<select class="region-filter form-control ng-pristine ng-valid ng-touched" 
                    ng-model="model.selections.passionPoint" ng-options="item.id as item.title for item in model.passionPoints.items">
            <option value="" class="">All Interest</option>
            <option value="0" label="Ranches &amp; Rodeos">Ranches &amp; Rodeos</option>
            <option value="1" label="Beaches">Beaches</option>
            <option value="2" label="Arts &amp; Culture">Arts &amp; Culture</option>
            <option value="3" label="Family">Family</option>
            <option value="4" label="Golf">Golf</option>
            <option value="5" label="Historic">Historic</option>
                </select>

Answer 1

您可以在ng-options中使用过滤器 <select class="region-filter form-control ng-pristine ng-valid ng-touched" ng-model="model.selections.passionPoint" ng-options="item.id as item.title for item in model.passionPoints.items | filter: filterItems"> ＆＃34; filterItems＆＃34;是一个应该在控制器中的函数

$scope.filterItems = function(item){
   //write the logic based on the requirement.
   return item.id <= $scope.model.passionPoints.items.length-3
}

Answer 2

您可以使用 ng-if 或 ng-show

例如：

    var myArray = [{
      id: 1,
      name: 'value1'
    }, {
      id: 2,
      name: 'value2'
    }, {
      id: 3,
      name: 'value3'
    }];

    <span ng-repeat="obj in myArray" ng-if="obj.id > 2">{{obj.name}}</span>
    <span ng-repeat="obj in myArray" ng-show="obj.id > 2">{{obj.name}</span>

在上面的例子中， value3 将被打印到屏幕上。

Answer 3

我能够创建一个if语句来循环并删除不需要的select语句。它是一个圆形的方式，但它的工作完美。我没有必要修改HTML中的任何内容。如果有更好的方法，我愿意接受建议。

if (model.data.passionPointFilter) {
            txThingsToDo.loadAll().then(function (thingstodo) {
                model.passionPoints.loading = false;
                for (var i = 0; i < thingstodo.results.length; i++) {
                    //Hide unwanted passionpoints from list.
                    if (thingstodo.results[i].id != "tex-plorer" &&
                        thingstodo.results[i].id != "films" &&
                        thingstodo.results[i].id != "tx-food-and-drink" &&
                        thingstodo.results[i].id != "tx-music" &&
                        thingstodo.results[i].id != "tx-beaches" &&
                        thingstodo.results[i].id != "tx-outdoors" &&
                        thingstodo.results[i].id != "chisholmtrail") {
                        model.passionPoints.items.push(thingstodo.results[i]);
                    }
                }
            });

使用AngularJS中的ng-options删除或隐藏选择列表中的特定项目

3 个答案: