1

Как c помощью AngularJS сделать так, чтобы при выборе определенного checkbox выводился соответсвующий пункт, при выборе двух, выводились оба и т.д. Буду благодарен за помощь. jsbin

HTML:

<body ng-app="shopApp" ng-controller="ProductsController as ctrl">

            <label><input type="checkbox">red</label>
            <label><input type="checkbox">White</label>
            <label><input type="checkbox">Grey</label>

<div ng-repeat="product in ctrl.products">

  <p>{{product.color}}</p>

</div>  
</body>

JS:

        var app = angular.module('shopApp',[]);
        app.controller('ProductsController', ProductsController);

        function Product(color){
             this.color = color;
        }

        function ProductsController(){
            this.products = [
              new Product('red'),
              new Product('white'),
              new Product('grey'),
              new Product('red'),
              new Product('white'),
              new Product('grey')
            ];
          }

1 ответ 1

1

Решение:

        var app = angular.module('shopApp',[]);
        app.controller('ProductsController', ProductsController);

        function Product(color){
             this.color = color;
        }

        function ProductsController(){
            this.products = [
              new Product('red'),
              new Product('white'),
              new Product('grey'),
              new Product('red'),
              new Product('white'),
              new Product('grey')
            ];
            this.selectedProducts = [];
          }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="shopApp" ng-controller="ProductsController as ctrl">

            <label><input type="checkbox" ng-model="ctrl.selectedProducts['red']" ng-value="true">Red</label>
            <label><input type="checkbox" ng-model="ctrl.selectedProducts['white']" ng-value="true">White</label>
            <label><input type="checkbox" ng-model="ctrl.selectedProducts['grey']" ng-value="true">Grey</label>

<div ng-repeat="product in ctrl.products">

  <p ng-show="ctrl.selectedProducts[product.color]">{{product.color}}</p>

</div>  
</body>

3
  • в чем заключается решение? Почему именно его стоит использовать? Попробуй писать более развернутые ответы
    – Grundy
    7 июн 2017 в 16:34
  • Буду впредь. Старался решить задачу с минимальными изменениями входящих данных, что бы человеку был понятен код, часть которого он же и писал.
    – Nomak
    27 июн 2017 в 12:32
  • Ты можешь отредактировать свой ответ нажав кнопку править
    – Grundy
    27 июн 2017 в 13:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.