Как показывать элементы с false?

Question

[artjerom]

Нужно чтобы при нажатии на чекбокс показывались элементы со статусом false, вот код приложения
html:

<ul>
    <h1>{{ title }}</h1>
    <input type="search" ng-model="query">
    <br>
    <label for="show">Показать скрытые товары</label>
    <input type="checkbox" id='show' ng-model='showEmpty'>
    <li ng-repeat="phone in phones | filter:{name:query}" >
      <span>{{ phone.name }}</span>
      <p>{{ phone.snippet }}</p>
    </li>
  </ul>

js:

phonecatApp.controller('PhoneListCtrl', function($scope) {
  $scope.title = 'Телефоны'
  $scope.phones = [
    {'name': 'Nexus S', 'snippet': 'one phone...', 'status': true},
    {'name': 'Motorolla XOOM', 'snippet': 'fast phone...', 'status': false}
  ];

Answer 1

[Влад]

Привет! Не очень силен в ангуляре, но постарался что-то сделать, попробуй так:

HTML:

<div ng-app="phoneApp">
    <div ng-controller="PhoneListCtrl">
        <ul>
            <h1>{{ title }}</h1>
            <br>
            <label for="show">Показать скрытые товары</label>
            <input type="checkbox" id='show' ng-model='showEmpty' ng-click="showFalse(showEmpty)">
            <li ng-repeat="phone in phones" >
                <span>{{ phone.name }}</span>
                <p>{{ phone.snippet }}</p>
            </li>
        </ul>
    </div>
</div>

JS:

var $scope;
var app = angular.module('phoneApp', []);

function PhoneListCtrl($scope) {
  $scope.title = 'Телефоны';
  phones = [
    {'name': 'Nexus S', 'snippet': 'one phone...', 'status': true},
    {'name': 'Motorolla XOOM', 'snippet': 'fast phone...', 'status': false}
  ];
  $scope.phones = phones;
  
  $scope.showFalse = function(value) {
    if (value) {
    	results = [];
    	angular.forEach(phones, function(phone) {
            if (!phone.status) results.push(phone);
    	});
    	$scope.phones = results;
    } else {
    	$scope.phones = phones;
    }
  }
}

Answer 2

[SirMustache]

можно добавить:

<li ng-repeat="phone in phones | filter:{name:query}"
        ng-if="phone.status || phone.status != showEmpty">

Ну и в скоуп сразу
$scope.showEmpty = false;