РЕЗЮМЕ
У меня есть список брендов и список продуктов. Я использую ng-repeat, чтобы показать список брендов, и ng-repeat с фильтром, чтобы показать список продуктов в их соответствующих брендах. Я хочу, чтобы каждая марка и каждый продукт имели кнопку, которая больше описывает этот бренд/продукт. Все эти кнопки должны использовать ту же функцию на контроллере.Angular - могу ли я использовать одну функцию для нескольких объектов внутри вложенного ng-repeat, который запускает ng-show только этого объекта?
ПРОБЛЕМА
Кнопкой, которая показывает больше о марке также показывает больше о каждом из продуктов этой марки, КРОМЕ (это не странная часть для меня) я нажимаю кнопку продукта в этой марке первым, в в этом случае он будет работать правильно.
КОД
Пожалуйста, смотрите Plunker здесь, и обратите внимание, что при нажатии на «шоу типа» на бренд, это также показывает все виды продукции в рамках этого бренда: http://plnkr.co/edit/gFnq3O3f0YYmBAB6dcwe?p=preview
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="MyController as vm">
<div ng-repeat="brand in brands">
<h1>
{{brand.name}}
</h1>
<button ng-click="showType(brand)">
Show Brand Type
</button>
<div ng-show="show">
{{brand.type}}
</div>
<div ng-repeat="product in products
| filter:filterProducts(brand.name)">
<h2>
{{product.name}}
</h2>
<button ng-click="showType(product)">
Show Product Type
</button>
<div ng-show="show">
{{product.type}}
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
JAVASCRIPT
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
$scope.brands = [{
name: 'Kewl',
type: 'Cereal'
}, {
name: 'Joku',
type: 'Toy'
}, {
name: 'Loko',
type: 'Couch'
}]
$scope.products = [{
name: 'Kewlio',
type: 'Sugar Cereal',
brand: 'Kewl'
}, {
name: 'Kewliano',
type: 'Healthy Cereal',
brand: 'Kewl'
}, {
name: 'Jokurino',
type: 'Rattle',
brand: 'Joku'
}, {
name: 'Lokonoko',
type: 'Recliner',
brand: 'Loko'
}, {
name: 'Lokoboko',
type: 'Love Seat',
brand: 'Loko'
}]
$scope.showType = function(item) {
this.show = !this.show;
}
$scope.filterProducts = function(brand) {
return function(value) {
if(brand) {
return value.brand === brand;
} else {
return true;
}
}
}
});
ВАЖНО ПРИМЕЧАНИЕ: Я понимаю, что могу добавить атрибут объекта (brand.show) и передать объект в функцию, а затем изменить этот атрибут на true/false, но я не хочу этого делать, потому что в моем действительном приложении кнопка отобразит форму, которая редактирует бренд/продукт и отправляет информацию в Firebase, и я не хочу, чтобы у объекта был атрибут show. Я бы предпочел не удалять атрибут 'show' каждый раз, когда я хочу редактировать информацию в Firebase.
's cope: true' - не изолированная область видимости, является областью _child_, а также 'ng-repeat' уже создает собственную область – Grundy
@Grundy true, спасибо за комментарий –