Katakanlah saya memiliki objek bernama,

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

Dan saya membagi kunci "nama" seperti scope.x = scope.rec.name.split(","); maka scope.x akan menjadi array.

Sekarang saya perlu mengulangi "scope.x" dalam tampilan dan mendapatkan nilai yang terkait dengan nama properti yang cocok di scope.rec. Saya hanya ingin mengulangi nama properti yang valid, jadi saya perlu menggunakan filter pada scope.x, tetapi tidak berfungsi seperti yang saya harapkan.

Setelah bagian pertama berfungsi, saya juga perlu menambahkan fungsionalitas untuk mengalikan nilai properti scope.rec bersama - dalam contoh di atas, hanya 2 angka (a,b), tetapi bisa lebih dari 2.

Di bawah ini adalah kode yang saya coba.

 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>

Sekarang ys di input sama untuk kedua input, dan fungsi calc() tidak menghitung nilai dengan benar.

Hargai bantuan Anda sebelumnya.

2
Ven 13 Maret 2017, 18:06

2 jawaban

Jawaban Terbaik

Filter Anda (setidaknya bagaimana Anda menggunakannya dalam tampilan Anda) akan menerima array dengan semua elemen, bukan hanya satu. Jadi, Anda perlu mengembalikan array lengkap

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

Dan mengembalikan data yang difilter.

Menurut pandangan Anda, Anda perlu menggunakan filter sudut.

Untuk masukan Anda, Anda harus menggunakan ini

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

Meskipun saya akan menghapus id itu - id harus unik dan mungkin ada nilai yang diulang.

Untuk fungsi calc() Anda, Anda dapat menggunakan pengurangan untuk mengalikannya

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

Dan untuk mendapatkan referensi ke $scope.filteredItems gunakan ini dalam pandangan Anda

<div ng-repeat="y in (filteredItems = (x | filter:myFilter:rec))">
3
Gonzalo.- 13 Maret 2017, 18:30

Anda dapat melakukan sesuatu seperti ini:

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>
0
Gaurav 13 Maret 2017, 17:24