Javascript将新字段分配给对象

Question

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

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}} 出于明显的原因，这不起作用，角度不知道 - 甚至存在。

问题在于，在我的 for 循环中，一切正常。它的日志记录就像它应该做的那样，所以我认为它有效。当我检查前端并将其更改为显示“NumberForSearch”时，什么也没有出现。

然后，我在 for 循环之外添加了日志记录语句，以仅检查我的一个对象以查看该字段是否存在而它不存在。所以我的问题是，为什么这个 sn-p 没有在我的对象中添加“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();
        });
      }
});