Question

我正在使用ng-options标记内的select进行迭代

对于那个对象列表下面有空值我发布了我的示例数据我突出显示空数据我也发布了我的代码。

JSON DATA：

$scope.dummyData =    [
        {
            "id": "0a40f753-0919-4bb2-b64e-74a280695ac6",
            "buildName": "JackPot",
            "department": "",
            "floor": "",
            "roomno": "12345Room",
            "wing": "TEST"
        },
        {
            "id": "1ff0d1e3-c347-41ce-8b96-acb695bba7a8",
            "buildName": "JackPot",
            "department": "Dept",
            "floor": "Testing",
            "roomno": "123f",
            "wing": "Test"
        }
    ]

以上的JSON数据有 floor：“”空值。

代码：

<select ng-model="buildNameng" ng-options="option.floor as option.floor for option in dummyData | unique:'buildName'" style="width:12%" ng-change="buildCh(buildNameng)">
  <!-- You can have ONE default, null selection option.--
          <option value="">---Building---</option>
              </select>

如果$scope.dummyData Json楼层已空，则下拉列表会自动更改为空值。这里的问题是，如果我在内部获得一个空值，如上面的JSON。ng-model="buildNameng"自动填充该空值，即使它还有一个非空值。 ng-model buildNameng首先自动填充到空数据中。我不知道如何控制这个？

我知道上面的选项标签在no-options中的另一种方式就是这样改变我得到了输出但是我故意不想这样。

 ng-options="option.id as option.floor for option in dummyData | unique:'buildName'"

我需要控制自动填充程序中的空数据。请指导我，我正在寻找很多，但我找不到

Answer 1

使用for循环遍历selectedCat数组，并在显示数据之前删除没有定义楼层的每个数组项。

var dummyData =    [
        {
            "id": "0a40f753-0919-4bb2-b64e-74a280695ac6",
            "buildName": "JackPot",
            "department": "",
            "floor": "",
            "roomno": "12345Room",
            "wing": "TEST"
        },
        {
            "id": "1ff0d1e3-c347-41ce-8b96-acb695bba7a8",
            "buildName": "JackPot",
            "department": "Dept",
            "floor": "Testing",
            "roomno": "123f",
            "wing": "Test"
        }
    ];

for(var i = 0; i < dummyData.length; i++) {
    if (!dummyData[i].floor); {
    dummyData.splice(i, 1);
  }
}
$scope.dummyData = dummyData;

Answer 2

我猜您使用的是angular-filter，因此您可以简单地使用angular-filter#removewith filter，如下所示：

removeWith: { floor: '' }

看看这个简单的例子：

(function() {
  'use strict';
  angular
    .module('app', ['angular.filter'])
    .controller('mainCtrl', mainCtrl);

  function mainCtrl($scope) {
    $scope.dummyData = [  
       {  
          "id":"0a40f753-0919-4bb2-b64e-74a280695ac6",
          "buildName":"JackPot",
          "department":"",
          "floor":"",
          "roomno":"12345Room",
          "wing":"TEST"
       },
       {  
          "id":"1ff0d1e3-c347-41ce-8b96-acb695bba7a8",
          "buildName":"JackPot2",
          "department":"Dept",
          "floor":"Testing",
          "roomno":"123f",
          "wing":"Test"
       }
    ];
  } 
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.9/angular-filter.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <select ng-model="buildNameng" ng-options="option.floor as option.floor for option in dummyData | unique: 'buildName' | removeWith: { floor: '' }">
    <option value="">---Building---</option>
  </select>
</body>

</html>

我希望它有所帮助。

自动填充的空值在ng-model中，数据来自ng-options

2 个答案: