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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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