logo
down
shadow

angular ng-repeat with multiple filter options


angular ng-repeat with multiple filter options

By : Yan Cheng
Date : November 28 2020, 08:01 AM
To fix the issue you can do Try writing a custom filter, and using some kind of combination like this.
code :


Share : facebook icon twitter icon
Multiple parameters angular filter inside ng-repeat

Multiple parameters angular filter inside ng-repeat


By : user2338074
Date : March 29 2020, 07:55 AM
should help you out myTeam | bitwiseAnd applies the bitwise filter to the team array as a whole, not the players. So the effect is like writing
code :
<tr ng-repeat="player in true">
$scope.bitwiseAnd = function(type) {
  return function(player) {
    return $filter('bitwiseAnd')(player.Flag, type);
  }
}
<tr ng-repeat="player in myTeam | filter:bitwiseAnd(type)>
angular ng-options select filter ng-repeat

angular ng-options select filter ng-repeat


By : 叶假名
Date : March 29 2020, 07:55 AM
will be helpful for those in need You can create a custom filter and search by the property inside the object, as the following:
code :
(function(angular) {
  'use strict';
angular.module('ngRepeat', ['ngAnimate'])
.controller('repeatController', function($scope) {
  $scope.tasks = [
  			{
        'created': "2016-07-02T21:01:56.095Z",
        'description':"hang it",
        'dueDate':"2016-07-02T22:00:00.000Z",
        'inPersonTask':true,
        'isCurrentUserOwner':false,
        'moving':true,
        'profileImageURL':"modules/users/client/img/profile/default.png",
        'statusAssigned':false,
        'statusClosed':false,
        'statusOpen':true,
        'taskLocation':"eerywhere",
        'title':'example 3'
        },
        {
        'created': "2016-07-02T21:01:56.095Z",
        'description':"hang it",
        'dueDate':"2016-07-02T22:00:00.000Z",
        'inPersonTask':true,
        'isCurrentUserOwner':false,
        'DIY':true,
        'profileImageURL':"modules/users/client/img/profile/default.png",
        'statusAssigned':false,
        'statusClosed':false,
        'statusOpen':true,
        'taskLocation':"the world",
        'title':'example 2'
        },
        {
        'created': "2016-07-02T21:01:56.095Z",
        'description':"hang it",
        'dueDate':"2016-07-02T22:00:00.000Z",
        'inPersonTask':true,
        'isCurrentUserOwner':false,
        'marketing':true,
        'profileImageURL':"modules/users/client/img/profile/default.png",
        'statusAssigned':false,
        'statusClosed':false,
        'statusOpen':true,
        'taskLocation':"the world",
        'title':'example 3'
        }
  ];
  $scope.taskCategories = [
        {'cat': 'Moving & Delivery', 'filter': 'moving: true'},
        {'cat': 'DIY', 'filter': 'DIY: true'},
        {'cat': 'Marketing', 'filter': 'marketing: true' }
    ];
})

  .filter('customFilter', function() {
    return function(items, search) {
      if (!search) {
        return items;
      }    

      return items.filter(function(element) {
       // Ex: moving: true, becomes just 'moving'
       return Object.getOwnPropertyNames(element).find(x => x == search.substring(0, search.indexOf(':')));
      });
    };
  });
})(window.angular);
.example-animate-container {
  background:white;
  border:1px solid black;
  list-style:none;
  margin:0;
  padding:0 10px;
}

.animate-repeat {
  line-height:30px;
  list-style:none;
  box-sizing:border-box;
}

.animate-repeat.ng-move,
.animate-repeat.ng-enter,
.animate-repeat.ng-leave {
  transition:all linear 0.5s;
}

.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
  opacity:0;
  max-height:0;
}

.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
  opacity:1;
  max-height:30px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example</title>
  <link href="animations.css" rel="stylesheet" type="text/css">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.min.js"></script>
</head>

<body ng-app="ngRepeat">
  <div ng-controller="repeatController">
    <!-- list of tasks /-->
    <h3>List of tasks, without filter</h3>
    <ul class="example-animate-container">
      <li class="animate-repeat" ng-repeat="task in tasks">[{{$index + 1}}] {{ task.title }}, {{ task.taskLocation }}</li>
    </ul>
    <!-- list of tasks with filter /-->
    <h3>List of tasks with filter -- results are not showing</h3>
    <p>{{ selectedCat }}</p>
    <select ng-model="selectedCat" ng-options="x.cat for x in taskCategories" ng-value="x.filter">
    </select>
    <ul>
      <li class="animate-repeat" ng-repeat="task in tasks | customFilter: selectedCat.filter">
        [{{$index + 1}}] {{ task.title }}, {{ task.taskLocation }}</li>
    </ul>
  </div>
</body>

</html>
Angular filter out duplicates in multiple selects on ng-repeat

Angular filter out duplicates in multiple selects on ng-repeat


By : palak shah
Date : March 29 2020, 07:55 AM
To fix the issue you can do So looks like for this scenario to work across multiple select box, it would be beneficial to have a component/directive of our own select box which would behave according to our requirement.
So first step we need to create a directive/component to take is a list of option and display in select box. This directive will also handle the filter to eliminate those options which are selected from precious order
code :
app.directive('mySelectBox', function($filter) {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      optionList:'=',
      allOptions: '=',
      index: '='
    },
    templateUrl:'selectTemplate.html',
    link: function(scope) {
      scope.onChange = function () {
        for(var i=0;i<scope.optionList.length;i++) {
          scope.optionList[i].Show = true;
        }
        scope.person.Show = false;
      };

      scope.getValues = function(val) {
        if(scope.index > 0) {
          var j = scope.index;
          for(var l=j;l>0;l=l-1) {
            var previousVal = $filter('filter')(scope.allOptions[j-1].optionList, {ID:val.ID}, true);
            if(!previousVal[0].Show) {
              return false;
            } else {
              j=j-1;
            }
          }
        }
        return true;
      }
    }
  }
});
app.controller('MainCtrl', function($scope) {
  $scope.name = 'Boxes';
  $scope.options=[];
  $scope.optionList = 
      [ {ID: 1, Name: 'Branch', Show: true},
        {ID: 2, Name: 'BranchArea', Show: true},
        {ID: 3, Name: 'EmployeeType', Show: true},
        {ID: 4, Name: 'LastUpdateDateStart', Show: true},
        {ID: 5, Name: 'LastUpdateDateEnd', Show: true}  ];


  $scope.addCount = function() {
    $scope.options.push({optionList:angular.copy($scope.optionList)});
  }

});
<div>
      Select Box {{index+1}}: <select ng-change="onChange(index)" ng-options='person.Name for person in  optionList | filter:getValues' ng-model='person'><option value="">-- Select one --</option></select> 
      <span style="color:red">{{person.Name}}</span>
    </div>
<!DOCTYPE html>
<html ng-app="angularjs-starter">

  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <h1>Hello {{name}}</h1>
    <input type="button" ng-click="addCount()"> Click here to add a select box
    <div ng-repeat="count in options">
      <my-select-box data-index="$index" data-all-options="options" data-option-list="count.optionList" ></my-select-box>
    </div>

  </body>

</html>
Angular - How to filter data being displayed using ng-repeat based on select/options pick by user?

Angular - How to filter data being displayed using ng-repeat based on select/options pick by user?


By : Jordan
Date : March 29 2020, 07:55 AM
may help you . At first, you're using filter in a incorrect way.
Filter is used for arrays. So you must use like this:
code :
<div ng-repeat="element in array | filter: param">
<div ng-repeat="company in companies | filter: { name: selectedAccount }">
<select ng-model="selectedAccount" ng-options="account.name as account.name for account in companies">
</select>
(function() {
  "use strict";
  angular
    .module('app', [])
    .controller('appCtrl', function($scope) {
      $scope.companies = [{
        name: 'The Best Company Denim',
        users: [{
          firstName: 'Alex',
          lastName: 'D',
          number: 1234
        }, {
          firstName: 'Sarah',
          lastName: 't',
          number: 14
        }, {
          firstName: 'J',
          lastName: 'd',
          number: 7
        }]
      }, {
        name: 'The Best Company Elegant',
        users: [{
          firstName: 'Alx',
          lastName: 'B',
          number: 1234
        }, {
          firstName: 'Seth',
          lastName: 'w',
          number: 12
        }, {
          firstName: 'J.S',
          lastName: 'B',
          number: 7
        }]
      }, {
        name: 'The Best Company by Julia',
        users: [{
          firstName: 'Aleddddx',
          lastName: 'l',
          number: 1234
        }, {
          firstName: 'Maggy',
          lastName: 'n',
          number: 1
        }, {
          firstName: 'Ja',
          lastName: 'Key',
          number: 123
        }]
      }];
    });
})();
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
</head>

<body ng-controller="appCtrl">
  <div>
    <select ng-model="selectedAccount" ng-options="account.name as account.name for account in companies">
    </select>
    <hr>
    <div>
      Selected company: {{selectedAccount}}
    </div>
    <hr>
    <div ng-repeat="company in companies | filter: { name: selectedAccount }">
      <div ng-repeat="user in company.users">
        <p>{{user.firstName}}</p>
      </div>
      <div>
      </div>
    </div>
  </div>
</body>

</html>
Angular: IE11 When using an Multiple Select element, ng-repeat on options with ng-mouseover fails to trigger method

Angular: IE11 When using an Multiple Select element, ng-repeat on options with ng-mouseover fails to trigger method


By : Mario Pierre
Date : March 29 2020, 07:55 AM
like below fixes the issue I have an answer...
Underlying Problem: After some reading, IE does not support events on the "option" element. For example, (click, mouseover, mouseout, change, blur, etc).
code :
(function(angular) {
  'use strict';
  angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

    .controller('AppCtrl', function($scope) {
      $scope.selected = [];
      $scope.hovered = '';
      $scope.model = null;

      $scope.items = [{
          id: '1',
          name: 'Option A',
          health: 'Great Health :)'
        },
        {
          id: '2',
          name: 'Option B',
          health: 'Bad Health :('
        },
        {
          id: '3',
          name: 'Option C',
          health: 'Ok Health :|'
        }
      ];

      $scope.showExtraInformation = function(option) {
        $scope.hovered = option.health;
      };

      $scope.clearExtraInformation = function() {
        $scope.hovered = '';
      };

      $scope.toggle = function(item, list) {
        var idx = list.indexOf(item);
        if (idx > -1) {
          list.splice(idx, 1);
        } else {
          list.push(item);
        }
      };

      $scope.exists = function(item, list) {
        return list.indexOf(item) > -1;
      };

      $scope.isIndeterminate = function() {
        return ($scope.selected.length !== 0 &&
          $scope.selected.length !== $scope.items.length);
      };

      $scope.isChecked = function() {
        return $scope.selected.length === $scope.items.length;
      };

      $scope.toggleAll = function() {
        if ($scope.selected.length === $scope.items.length) {
          $scope.selected = [];
        } else if ($scope.selected.length === 0 || $scope.items.length > 0) {
          $scope.selected = $scope.items.slice(0);
        }
      };
    });
})(window.angular);
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-select-ngrepeat-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
  <script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
  <script src="//cdn.gitcdn.link/cdn/angular/bower-material/v1.1.5/angular-material.js"></script>
  <script src="app.js"></script>

</head>

<body>
  <div ng-controller="AppCtrl" class="md-padding demo checkboxdemoSelectAll" ng-app="MyApp">
    <fieldset class="demo-fieldset">
      <legend class="demo-legend">Using md-checkbox with the 'indeterminate' attribute </legend>
      <div layout="row" layout-wrap="" flex="">
        <div flex-xs="" flex="50">
          <md-checkbox aria-label="Select All" ng-checked="isChecked()" md-indeterminate="isIndeterminate()" ng-click="toggleAll()">
            <span ng-if="isChecked()">Un-</span>Select All
          </md-checkbox>
        </div>
        <div class="demo-select-all-checkboxes" flex="100" ng-repeat="item in items">
          <md-checkbox ng-checked="exists(item, selected)" ng-click="toggle(item, selected)" ng-mouseover="showExtraInformation(item)" ng-mouseout="clearExtraInformation()">
            {{ item.name }}
          </md-checkbox>
        </div>
      </div>
    </fieldset>
    <hr>
    <tt>model = {{selected}}</tt><br/>
    <tt>
      hover = {{hovered}}
    </tt>
  </div>
</body>

</html>
Related Posts Related Posts :
  • angular 6 Please add a @NgModule annotation
  • Trying to cast element ID to class selector in jQuery
  • Swipe JS - Display 3 Slides at a time
  • Jasmine test to call function when value is null
  • Redux reducer gets string instead of object
  • Keep chrome javascript running even if page reload
  • The event.target.value is not insert the userinput into a variable
  • Exporting HTML tables to Excel (.xls) in a separate sheet
  • Jquery tooltip on dialog close button
  • access variable inside anonymous function from outside
  • How come func is called from a function?
  • How to change add and remove active class in JavaScript
  • how to toggle a specific div in javascript
  • How to get all the values from multiple keys of an array of object?
  • jQuery bind() unbind() and on() and off()
  • regular expression to find DD Month YYYY from a string
  • How to upload files from web client (HTML/jQuery form) to your Dropbox folder
  • Backbone history and require.js issue
  • Confusion over Classical and Prototypal Inheritance Javascript
  • How to take screen shot of current webpage using Javascript/JQuery?
  • Store meridiem in a variable
  • class declared inside closure vs standard class without closure
  • javascript confirm box always return true
  • dynamically changing the size of font size based on text length using css and html
  • Node.js - Getting the host IP address while on Amazon EC2
  • Confusing CSS, can anyone explain please
  • How to install v8-profiler on Windows 8 (64 bit) using npm?
  • Resolve promise based on another promise
  • google maps adding overlay layer above UI and markers
  • Style specific letter?
  • RangeError: Maximum call stack size exceeded with array.slice
  • node rest client get with local variable
  • If condition not executes while mouse move fastly
  • Count the number of displayed elements in a HTML list
  • Locate JavaScript source code in Emacs
  • Clean, Modular Code vs MV* Frameworks
  • infinite scroll without loading image
  • Backbone: reverse collection order with comparator
  • What do printers ignore?
  • jQuery UI .tabs() Contentless tab?
  • Execute Javascript alert() after page (visually) loaded
  • JavaScript - duplicating array doesn't work
  • Excessive clickable area below image
  • JavaScript Regex: Replace |b| with <b>
  • Unexpected value change in 2D array in JavaScript
  • Function doesnt see parameter as a array of objects
  • jQuery fetch keypress event on chrome and IE
  • How to enable jquery validate localization?
  • Cassandra map collection returned by node.js Helenus looks odd
  • Selecting Children without ID or Class names
  • How to uncheck a group of checkboxes when another checkbox is checked
  • Is hiding content by Javascript or jQuery Worth trying
  • Load XUL resource using javascript
  • XML to HTML text area from server file system
  • set focus() on textbox on form onload
  • es lint '' is assigned a value but never used' eventhough i have used it
  • Can "name" attribute be used for custom VueJS components
  • Get innerHTML of content when it is clicked
  • HTTPS causes CSS animations to not load? Very confused
  • How to hide other div apart from touched div to the band
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org