A
A
artjerom2016-06-30 12:36:28
Angular
artjerom, 2016-06-30 12:36:28

How to show elements with false?

It is necessary that when clicking on the checkbox, elements with the status false are shown, here is the
html application code:

<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 the question

In order to leave comments, you need to log in

2 answer(s)
V
Vlad, 2016-06-30
@artjerom

Hey! Not very strong in angular, but tried to do something, try this:
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;
    }
  }
}

S
SirMustache, 2016-06-30
@SirMustache

can add:

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

Well, in scope right away
$scope.showEmpty = false;

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question