在数组上重复以过滤另一个对象上的键以获取关联值并对该值使用watch-Java 学习之路

假设我有一个叫做的对象，

scope.rec = {a: 2, b: 3, name: a,b};

我将"name"键拆分为 scope.x = scope.rec.name.split(","); ，然后scope.x将成为一个数组 .

现在我需要在视图中迭代"scope.x"并获取与 scope.rec 上的匹配属性名称相关联的值 . 我只想迭代有效的属性名称，所以我需要在 scope.x 上使用过滤器，但它没有像我期望的那样工作 .

一旦我得到第一部分工作，我还需要添加功能来将 scope.rec 属性的值相乘 - 在上面的例子中，它只有2个数字（a，b），但它可能超过2 .

以下是我尝试过的代码 .

scope.x  =
 scope.rec.name.split(",");
scope.myFilter = function(y) {
   if(!scope.rec.hasOwnProperty(y)) return false;
   scope.ys = Number(scope.rec[y]);
    return scope.ys;
        };

HTML：

<div ng-repeat="y in x | filter:myFilter">
            <label for="{{y}}">{{y}}</label>
            <input type="number" id="{{y}}" value={{ys}}>
    </div>
<div><input id="calc" type="number" ng-model="calc()" disabled></div>

现在输入中的 ys 对于两个输入都是相同的，并且 calc() 函数不能正确计算值 .

提前感谢您的帮助 .

2 回答

你的过滤器（至少你在视图中如何使用它）将收到一个包含所有元素的数组，而不仅仅是一个 . 所以你需要返回一个完整的数组

angular.module('myApp').filter('myFilter', function() {
    return function(arrayOfYs, recFromScope) {
      var filtered = [];
      arrayOfYs.forEach(function(y){
        if(!recFromScope.hasOwnProperty(y)) return;
        // if the value in the object is already a number, it is not necessary to use Number. If it is not the case, add it
        filtered.push(scope.rec[y]);
      });
      return filtered;
    }
});

并返回过滤后的数据 .

根据您的观点，您需要使用角度滤镜 .

对于你输入你应该使用它

<input type="number" id="{{y}}" value={{y}}>

虽然我会删除id - ID需要是唯一的，并且可能有重复的值 .

对于 calc() 函数，您可以使用reduce来乘以它们

$scope.calc = function(){
    return $scope.filteredItems.reduce(function(prev, current) {
         return prev * current;
    }, 1);
};

并获得对 $scope.filteredItems 的引用，在您的视图中使用它

<div ng-repeat="y in (filteredItems = (x | filter:myFilter:rec))">

回复于 2024-05-02T10:20:47+08:00

你可以这样做：

angular.module('myApp', [])
  .controller('MyController', MyController);

function MyController($scope) {

  $scope.result = 1;
  $scope.recObj = {};
  $scope.rec = {
    a: 2,
    b: 3,
    c: 5,
    name: 'a,b,c,d'
  };

  function initData() {
    var dataKeysArr = $scope.rec.name.split(",");

    for (var dataKey of dataKeysArr) {
      if ($scope.rec.hasOwnProperty(dataKey)) {
        $scope.recObj[dataKey] = $scope.rec[dataKey];
      }
    }
  };

  initData();

  // Watch
  $scope.$watchCollection(
    "recObj",
    function() {

      $scope.result = 1;
      for (var dataKey in $scope.recObj) {
        $scope.result *= $scope.recObj[dataKey];
      };
    }
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>

<div ng-app="myApp">

  <div ng-controller="MyController">

    <div ng-repeat="(key, val) in recObj">
      <label for="{{key}}">{{key}}</label>
      <input type="number" id="{{key}}" ng-model="recObj[key]">
    </div>
    <div>
      <input id="calc" type="number" ng-model="result" disabled>
    </div>

  </div>

</div>

回复于 2024-05-02T10:20:47+08:00

在数组上重复以过滤另一个对象上的键以获取关联值并对该值使用watch

2 回答

相关问题