AngularJS эквивалент jQuery: проверенный код

0

Я хочу показать div с параметрами, когда выбран один или несколько флажков, но я не могу понять, что должен делать код ng-show="". Что такое эквивалент AngularJS этого куска кода jQuery?

$('.checkboxes:checked').length > 0

Теги:

3 ответа

1
Лучший ответ

Я нашел свое решение:

Для флажков, которые я использую:

<div ng-repeat="item in items">

<input type="checkbox" ng-model='item.selected' />

</div>

И ng-show="": ng-show="(items|filter:{selected:true}).length"

Спасибо за ваши ответы!

1

Как указано здесь: https://docs.angularjs.org/api/ng/directive/ngShow

Если выражение истинно, то элемент отображается или скрывается соответственно.

Так что если вы ищете что-то вроде

<input type="checkbox" ng-model="boolExpr" />

<div ng-show="boolExpr"></div>
0

Не тот элегантный, но, может быть, вы можете использовать это:

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
    <script>
        var app = angular.module('app', []);
        app.controller('MyCtrl', function ($scope) {
            $scope.options = [
              {'title' : 'Title1', 'value' : 'A'},
              {'title' : 'Title2', 'value' : 'B'},
              {'title' : 'Title3', 'value' : 'C'}
            ];

            $scope.checkboxes = {};

            $scope.showMessage = function () {                  
              for (var key in $scope.checkboxes) {
                if ($scope.checkboxes[key] === true) return true;
              }                  
              return false;
            }
        });                        
    </script>
  </head>
  <body>
    <div ng-controller="MyCtrl">         
      <label ng-repeat="option in options">
        <input
          type="checkbox"
          value="{{option.value}}"
          ng-model="checkboxes[option.value]"
        > {{option.title}}
      </label>      

      Options: {{checkboxes|json}}<br>
      Show message: {{showMessage()|json}}<br>
      <div ng-show="showMessage()">
        hey
      </div>          
    </div>
  </body>
</html>

http://plnkr.co/edit/nVCmukG5abpi1Y4ZHkrq?p=preview

Ещё вопросы

Сообщество Overcoder
Наверх
Меню