给对象分配新字段

Javascript Assign New Field to object

本文关键字：字段 新字段 对象 分配      更新时间：2023-09-26

这里有一段运行在节点应用程序中的代码

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

Equipment是一个对象数组，我正在尝试为该数组中的每个对象添加一个名为"NumberForSearch"的属性。

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

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

然后我在for循环之外添加了日志记录语句来检查我的一个对象，看看这个字段是否存在，它不存在。所以我的问题是，为什么这个片段不添加"NumberForSearch"字段在我的对象?

您必须在设置$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();
        });
      }
});

相关文章：