Javascript 将新字段分配给对象

Question

我这里有一段代码在 Node 应用程序中运行

for( i=0; i < Equipment.length; i += 1 ) {
    Equipment[i].NumberForSearch = Equipment[i].ClassPrefix + "-" + Equipment[i].UnitNumber;
    console.log(Equipment[i].NumberForSearch);
}

console.log(Equipment[0]);

设备是一个对象数组，我试图向该数组中的每个对象添加一个名为“NumberForSearch”的属性。

在我的应用程序中，我们想要显示设备单元编号的方式是“ClasssPrefix”-“UnitNumber”。我想将它们加入到一个变量中的原因是，在我的 Angular 应用程序中，我希望用户能够在搜索字段中输入 12345-12345，然后过滤掉设备。如果我有 {{ClassPrefix}}-{{UnitNumber}} ，这不起作用，原因很明显， Angular 不知道 - 甚至存在。

问题是在我的 for 循环中一切都检查得很好。它的记录就像它应该的那样，所以我认为它有效。当我检查前端并将其更改为显示“NumberForSearch”时，没有任何显示。

然后，我在 for 循环外部添加了日志记录语句，以仅检查我的一个对象，以查看该字段是否存在以及是否不存在。所以我的问题是，为什么这个代码片段没有在我的对象中添加“NumberForSearch”字段？

Answer 1

在设置 $scope 的参数之前，您必须使用此字段创建对象。
看一下 init() 函数。
添加 NumberForSearch 字段后，我们定义了范围内参数的对象数组。
当然 ng-repeat 会循环遍历它并渲染元素。
因此我们将添加“| filter:query”来仅显示需要的

<div ng-controller="EquipmentController">
  <input type="text" ng-model="query.NumberForSearch" placeholder="search">

  <ul>
    <li ng-repeat="Item in Equipment | filter:query">{{Item.ClassPrefix}}-{{Item.UnitNumber}}</li>
  </ul>
</div>

js部分:

var App = angular.module('App', []);
App.controller('EquipmentController', function ($rootScope, $scope, $http, $filter) {
      $scope.Equipment = [];
      $scope.init = function() {
        var request = $http({
            method: 'get',
            url: '/path/to/equipment/resource'
        });

        request.success(function (response) {
            var Equipment = response.Equipment;
            for(var i in Equipment) {
              Equipment[i].NumberForSearch = Equipment[i].ClassPrefix + "-" + Equipment[i].UnitNumber;
            }
            $scope.Equipment = Equipment;
            $scope.$apply();
        });
      }

      $scope.init();
});

另一种过滤方式是将搜索字段发送到路由，换句话说，我们将查询发送到服务器，它会在服务器端过滤响应。

<div ng-controller="EquipmentController">
  <input type="text" ng-model="queryNumber" ng-change="searchByNumber()" placeholder="search">

  <ul>
    <li ng-repeat="Item in Equipment">{{Item.ClassPrefix}}-{{Item.UnitNumber}}</li>
  </ul>
</div>

js部分:

var App = angular.module('App', []);
App.controller('EquipmentController', function ($rootScope, $scope, $http, $filter) {
      $scope.Equipment = [];

      $scope.all = function() {
        var request = $http({
            method: 'get',
            url: '/path/to/equipment/resource'
        });

        request.success(function (response) {
            $scope.Equipment = response.Equipment;
            $scope.$apply();
        });
      }

      $scope.all();

      $scope.searchByNumber = function() {
        var request = $http({
            method: 'get',
            url: '/path/to/equipment/resource?number='+$scope.queryNumber
        });

        request.success(function (response) {
            $scope.Equipment = response.Equipment;
            $scope.$apply();
        });
      }
});