Javascript将新字段分配给对象

Question

我在节点应用程序中运行了一段代码

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

设备是一个对象数组，我正在尝试为该数组中的每个对象添加一个属性，名为＆＃34; NumberForSearch＆＃34;。

在我的应用程序中，我们想要显示设备单元号的方式是＆＃34; ClasssPrefix＆＃34; - ＆＃34; UnitNumber＆＃34;。我想将它们加入到一个变量中的原因是在我的角度应用程序中，我希望用户能够在搜索字段内键入12345-12345，然后过滤掉设备。如果我有{{ClassPrefix}} - {{UnitNumber}}出于显而易见的原因，这不起作用，角度不知道 - 甚至存在。

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

然后我在for循环外面添加了日志语句来检查我的一个对象，看看该字段是否存在并且它不存在。所以我的问题是，为什么这个片段没有添加＆＃34; NumberForSearch＆＃34;我的对象中的字段？

Answer 1

在设置$ scope＆＃39; s参数之前，您必须使用此字段创建对象 看看 init（）功能。
添加 NumberForSearch 字段后，我们将对象数组定义为范围内的参数 当然，ng-repeat将遍历它并渲染元素 所以我们将添加＆＃34; |滤波器：查询＆＃34;只显示需要的

<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 part：

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 part：

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