Pertanyaan Bagaimana cara menggunakan ng-if dengan ng-repeat?


Saya memiliki pengaturan objek nav sederhana yang berisi daftar item nav (dan apakah mereka harus muncul di nav utama atau tidak). Sepertinya ketika saya mencoba untuk mencampur ng-jika dengan ng-repeat, semuanya berantakan, tetapi ketika saya mencampur ng-show dengan ng-repeat, ini berfungsi dengan baik (tapi saya berakhir dengan sekelompok elemen tersembunyi yang tidak saya lakukan ingin ditambahkan ke DOM).

   <section class="nav">
        <a  ng-repeat="(key, item) in route.routes"
            ng-href="{{key}}"
            ng-show="item.nav"
        >
                {{item.label}}
        </a>
    </section>

Tetapi yang berikut ini tidak berfungsi (perhatikan ng-show sekarang ng-if):

    <section class="nav">
    <a  ng-repeat="(key, item) in route.routes"
        ng-href="{{key}}"
        ng-if="item.nav"
    >
            {{item.label}}
    </a>
</section>

Objek rute tampak seperti

routes: {
    '/home': { label: 'Home', nav: true },
    '/contact': { label: 'Contact', nav: false},
   // etc
}

Saya menerima galat berikut saat mencoba menggunakan ng-if:

Kesalahan: Beberapa arahan [ngIf, ngRepeat] meminta transclusion pada:

Saya kira itu mencoba untuk memberitahu saya bahwa saya tidak bisa menyatakan itu deklarasi untuk yang ada dua kali. Saya bisa menggunakan ng-if pada elemen batin, tapi saya pikir saya masih akan berakhir dengan sekelompok luar yang kosong a tag.


32
2017-10-07 21:47


asal


Jawaban:


Mungkin ada solusi yang lebih baik, tetapi setelah membaca balasan di atas, Anda dapat mencoba membuat filter khusus Anda sendiri:

angular.module('yourModule').filter('filterNavItems', function() {
  return function(input) {
    var inputArray = [];

    for(var item in input) {
      inputArray.push(input[item]);
    }

    return inputArray.filter(function(v) { return v.nav; });
  };
});

Kemudian untuk menggunakannya:

<section class="nav">
    <a  ng-repeat="(key, item) in routes | filterNavItems"
        ng-href="{{key}}">
            {{item.label}}
    </a>
</section>

Inilah Plunker: http://plnkr.co/edit/srMbxK?p=preview


18
2017-10-07 23:52



Dari pada ng-if Anda harus menggunakan filter (http://docs.angularjs.org/api/ng.filter:filter) padamu ng-repeat untuk mengecualikan barang-barang tertentu dari daftar Anda.


5
2017-10-07 21:56



Saya mengalami masalah ini juga, dan menemukan beberapa cara untuk menyelesaikannya.

Hal pertama yang saya coba adalah menggabungkan ng-if dan ng-repeat menjadi petunjuk khusus. Saya akan mendorong itu sampai github dalam waktu dekat, tapi itu tidak jelas.

Cara yang lebih mudah untuk melakukannya adalah dengan memodifikasi route.routes koleksi (atau buat koleksi placeholder)

$scope.filteredRoutes = {};
angular.forEach($scope.route.routes, function(item, key) {
    if (item.nav) { $scope.filteredRoutes[key] = item; }
};

dan dalam pandangan Anda

...
<a  ng-repeat="(key, item) in filteredRoutes"
...

Jika Anda perlu memperbarui secara dinamis, cukup siapkan jam tangan, dll.


2
2017-10-07 21:55



Bagaimana dengan penggunaan satu-liner ini $ filter:

$scope.filteredRoutes = $filter('filter')($scope.route.routes, function(route){
  return route.nav;
});

1
2017-09-22 13:04



Anda harus menggunakan filter di Anda ng-repeat alih-alih menggunakan ng-if.

Ini seharusnya berfungsi:

<section class="nav">
    <a  ng-repeat="(key, item) in route.routes | filter:item.nav"
        ng-href="{{key}}">
            {{item.label}}
    </a>
</section>

Peringatan: Saya belum benar-benar menguji kode ini.


0
2017-10-07 22:02