自动填充空值在ng模型中，从ng选项获取数据

Automatically Populated Empty Value In ng-model ,data getting from ng-options

本文关键字：ng 选项 数据 获取 模型 填充 空值      更新时间：2023-09-26

我在select标签中使用ng-options迭代的对象列表

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

JSON数据：

$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楼层为空，则下拉列表会自动变为空值。这里的问题是，如果我在floor内部得到一个Empty值，就像上面的JSON一样。ng-model="buildNameng"会自动填充这个空值，即使它还有一个非null值。ng模型buildNameng首先自动填充到空数据中。我不知道该怎么控制？

我知道另一种方式，上面的select标记在没有选项的情况下会像这样改变。我得到了输出，但我有目的地不想要这样。

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

我需要控制程序中自动填充的空数据，这也是问题所在。请指导我，我搜索了很多，但找不到

使用for循环遍历chosenCat数组，并在显示数据之前删除所有没有定义底部的数组项。

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;

我猜您正在使用angular-filter，所以您可以简单地使用angular-filter#removewithfilter，如下所示：

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>

我希望它能有所帮助。

相关文章：