0

Help to solve the problem. I'm trying to make a button or checkbox with the name "all", which would reset all previous samples in the checkboxes. .......................

(function () {'use strict';

angular.
  module('myApp', []).
  controller('WineCtrl', WineCtrl);

// Functions - Definitions
function WineCtrl() {
  // Variables - Private
  var self = this;
  
  // Variables - Public
  self.filter = {};
  self.wines = [
    {name: 'Wine A', category: 'red'},
    {name: 'Wine B', category: 'red'},
    {name: 'Wine C', category: 'white'},
    {name: 'Wine D', category: 'red'},
    {name: 'Wine E', category: 'red'},
    {name: 'Wine F', category: 'white'},
    {name: 'Wine G', category: 'champagne'},
    {name: 'Wine H', category: 'champagne'}    
  ];
  
  // Functions - Public
  self.filterByCategory = filterByCategory;
  self.getCategories = getCategories;
  
  // Functions - Definitions
  function filterByCategory(wine) {
    return self.filter[wine.category] || noFilter(self.filter);
  }
    
  function getCategories() {
    return (self.wines || []).
      map(function (wine) { return wine.category; }).
      filter(function (cat, idx, arr) { return arr.indexOf(cat) === idx; });
  }

  function noFilter(filterObj) {
    return Object.
      keys(filterObj).
      every(function (key) { return !filterObj[key]; });
  }
}

}());
<script src="https://code.angularjs.org/1.5.7/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="WineCtrl as ctrl">
    <h3>Categories</h3>
    <div ng-repeat="category in ctrl.getCategories()">
      <label>
        <input type="checkbox" ng-model="ctrl.filter[category]" />
        {{ category }}
      </label>
    </div>
    <hr />
    <h3>Available Wines</h3>
    <div ng-repeat="wine in (ctrl.wines | filter:ctrl.filterByCategory) as filteredWines">
      {{ wine.name }} <i>({{ wine.category }})</i>
    </div>
    <hr />
    <b>Number of results: {{ filteredWines.length }}</b>
  </div>
</div>

I will be grateful for any help.

1 Answer 1

1

Reset means what you need exactly. Here is simple answer.

(function () {'use strict';

angular.
  module('myApp', []).
  controller('WineCtrl', WineCtrl);

// Functions - Definitions
function WineCtrl() {
  // Variables - Private
  var self = this;
  
  // Variables - Public
  self.filter = {};
  self.wines = [
    {name: 'Wine A', category: 'red'},
    {name: 'Wine B', category: 'red'},
    {name: 'Wine C', category: 'white'},
    {name: 'Wine D', category: 'red'},
    {name: 'Wine E', category: 'red'},
    {name: 'Wine F', category: 'white'},
    {name: 'Wine G', category: 'champagne'},
    {name: 'Wine H', category: 'champagne'}    
  ];
  
  // Functions - Public
  self.filterByCategory = filterByCategory;
  self.getCategories = getCategories;
  self.reset = function(){self.filter = {};}
  // Functions - Definitions
  function filterByCategory(wine) {
    return self.filter[wine.category] || noFilter(self.filter);
  }
    
  function getCategories() {
    return (self.wines || []).
      map(function (wine) { return wine.category; }).
      filter(function (cat, idx, arr) { return arr.indexOf(cat) === idx; });
  }

  function noFilter(filterObj) {
    return Object.
      keys(filterObj).
      every(function (key) { return !filterObj[key]; });
  }
}

}());
<script src="https://code.angularjs.org/1.5.7/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="WineCtrl as ctrl">
    <h3>Categories</h3>
    <button ng-click="ctrl.reset()">Reset</button>
    <div ng-repeat="category in ctrl.getCategories()">
      <label>
        <input type="checkbox" ng-model="ctrl.filter[category]" />
        {{ category }}
      </label>
    </div>
    <hr />
    <h3>Available Wines</h3>
    <div ng-repeat="wine in (ctrl.wines | filter:ctrl.filterByCategory) as filteredWines">
      {{ wine.name }} <i>({{ wine.category }})</i>
    </div>
    <hr />
    <b>Number of results: {{ filteredWines.length }}</b>
  </div>
</div>

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.