Uncheck all checkboxes based on another checkbox using Angularjs

Uncheck all checkboxes based on another checkbox using Angularjs - javascript

I am trying to figure out that if the user checks N/A all the other boxes are unchecked (if they are checked). Below is what i have working, but I am not sure on how to uncheck those boxes and set them to false Any help is greatly appreciated.
var app = angular.module('MyApp', []);
app.controller('MyAppController', ['$scope',
function($scope) {
$scope.appliances = [{
Name: 'N/A'
},
{
Name: 'Computer',
ExcludedBy: 'N/A'
},
{
Name: 'TV',
ExcludedBy: 'N/A'
},
{
Name: 'Voice Assistant',
ExcludedBy: 'N/A'
}
];
$scope.myObj = {};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyAppController">
<div ng-repeat="app in appliances">
<input type="checkbox" value="{{ app.Name }}" ng-model="myObj[app.Name]" ng-disabled="myObj[app.ExcludedBy]"> {{ app.Name }}
</div>
</div>
</div>

You can use a ng-change to trigger a function to change the underlying content.
var app = angular.module('MyApp', []);
app.controller('MyAppController',['$scope',
function($scope) {
$scope.appliances = [
{
Name: 'N/A'
},
{
Name: 'Computer',
ExcludedBy: 'N/A'
},
{
Name: 'TV',
ExcludedBy: 'N/A'
},
{
Name: 'Voice Assistant',
ExcludedBy: 'N/A'
}
];
$scope.myObj = {};
$scope.checkForNA = function () {
if ($scope.myObj[$scope.appliances[0].Name]) {
$scope.myObj = {};
$scope.myObj[$scope.appliances[0].Name] = true;
}
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyAppController">
<div ng-repeat="app in appliances">
<input type="checkbox" value="{{ app.Name }}" ng-model="myObj[app.Name]" ng-disabled="myObj[app.ExcludedBy]" ng-change="checkForNA()">
{{ app.Name }}
</div>
</div>
</div>

Something like this
var app = angular.module('MyApp', []);
app.controller('MyAppController',['$scope',
function($scope) {
$scope.appliances = [
{
Name: 'N/A'
},
{
Name: 'Computer',
ExcludedBy: 'N/A',
IsSelected: false,
IsDisabled: false
},
{
Name: 'TV',
ExcludedBy: 'N/A',
IsSelected: false,
IsDisabled: false
},
{
Name: 'Voice Assistant',
ExcludedBy: 'N/A',
IsSelected: false,
IsDisabled: false
}
];
$scope.myObj = {};
$scope.checkAll = function(name, isSelected){
if(name === 'N/A'){
for(var i =0; i< $scope.appliances.length; i++){
if($scope.appliances[i].Name != name && $scope.appliances[i].ExcludedBy===name){
$scope.appliances[i].IsSelected = false;
$scope.appliances[i].IsDisabled = !isSelected;
}
}
}
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyAppController">
<div ng-repeat="app in appliances">
<input type="checkbox" ng-disabled="app.IsDisabled" ng-click="checkAll(app.Name, app.IsSelected)" ng-model="app.IsSelected">
{{ app.Name}}
</div>
</div>
</div>

In this case, DavidX's answer is correct. However, we can improve the way of verifying through the existence of the ExcludedBy attribute in a generic way using Array#find().
No necessarily, the first element of the array $scope.appliances will be N/A item.
var naItem = $scope.appliances.find(function(x) {
return x.ExcludedBy === undefined;
});
For this example I'm using the ng-change directive.
Something like this:
First example:
var app = angular.module('MyApp', []);
app.controller('MyAppController', ['$scope',
function($scope) {
$scope.appliances = [{
Name: 'N/A'
},
{
Name: 'Computer',
ExcludedBy: 'N/A'
},
{
Name: 'TV',
ExcludedBy: 'N/A'
},
{
Name: 'Voice Assistant',
ExcludedBy: 'N/A'
}
];
$scope.myObj = {};
$scope.check = function() {
var naItem = $scope.appliances.find(function(x) {
return x.ExcludedBy === undefined;
});
if ($scope.myObj[naItem.Name]) {
$scope.myObj = {};
$scope.myObj[naItem.Name] = true;
}
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyAppController">
<div ng-repeat="app in appliances">
<input type="checkbox" value="{{ app.Name }}" ng-model="myObj[app.Name]" ng-disabled="myObj[app.ExcludedBy]" ng-change="check()"> {{ app.Name }}
</div>
</div>
</div>
Second example:
var app = angular.module('MyApp', []);
app.controller('MyAppController', ['$scope',
function($scope) {
$scope.appliances = [{
Name: 'Computer',
ExcludedBy: 'N/A'
},
{
Name: 'TV',
ExcludedBy: 'N/A'
},
{
Name: 'Voice Assistant',
ExcludedBy: 'N/A'
},
{
Name: 'N/A'
}
];
$scope.myObj = {};
$scope.check = function() {
var naItem = $scope.appliances.find(function(x) {
return x.ExcludedBy === undefined;
});
if ($scope.myObj[naItem.Name]) {
$scope.myObj = {};
$scope.myObj[naItem.Name] = true;
}
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyAppController">
<div ng-repeat="app in appliances">
<input type="checkbox" value="{{ app.Name }}" ng-model="myObj[app.Name]" ng-disabled="myObj[app.ExcludedBy]" ng-change="check()"> {{ app.Name }}
</div>
</div>
</div>

Related

Unable to set selected option in dropdown control

I am unable to bind selected option in dropdown control. I don't want whole object of $scope.Types inside $scope.obj. It should just have value of $scope.Types inside $scope.obj.type
var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
$scope.types =
[
{ label: "Pizza", value: 1 },
{ label: "Cakes", value: 2 },
{ label: "Pastry", value: 3 }
];
$scope.obj = { type : 1 };//I want dropdown selected value to be updated in type variable
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul ng-app="myApp" ng-controller="MyController">
<select name="status" ng-model="obj.value"
ng-options="type.value as type.label for type in types track by type.value">
<option value="">Select Types</option>
</select>
</ul>
I am not getting what wrong I am doing here.

var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
$scope.obj = {};
$scope.types =
[
{ label: "Pizza", value: 1 },
{ label: "Cakes", value: 2 },
{ label: "Pastry", value: 3 }
];
$scope.obj.value = 2;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul ng-app="myApp" ng-controller="MyController">
<select name="status" ng-model="obj.value"
ng-options="type.value as type.label for type in types">
<option value="">Select Types</option>
</select>
</ul>

Like this?
var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
$scope.$watch('selectedValue', function(newValue, oldValue) {
if (newValue){
$scope.obj.type = newValue.value;
}
});
$scope.types =
[
{ label: "Pizza", value: 1 },
{ label: "Cakes", value: 2 },
{ label: "Pastry", value: 3 }
];
$scope.obj = { type: 1 };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul ng-app="myApp" ng-controller="MyController">
<select name="status" ng-model="selectedValue"
ng-options="type as type.label for type in types track by type.value">
<option value="">Select Types</option>
</select>
{{ obj.type}}
</ul>

Show/hide a record based on condition inside ng-repeat not working

Below are my records :
$scope.currentSelection = "Admin";
$scope.records = [
{ id: 'Employee', params:[]},
{ id: 'Skills', params:[]},
{ id: 'Payroll', params:[]},
{ id: 'Appraisal', params:[]},
{ id : 'Statistics',params:[]}
];
Now if $scope.currentSelection is admin then I want to show all items with statistics(Employee,Skills,Payroll,Appraisal,Statistics) else I don't want to show Statistics rest other items (Employee,Skills,Payroll,Appraisal) if $scope.currentSelection is Guest or Employee.
But the problem is when currentSelection is Admin then others items are not showing up except statistics.
Note: I don't want to use a filter for this.
But the problem
var app = angular.module("myApp", []);
app.controller("MyController", function ($scope) {
$scope.currentSelection = "Admin";
$scope.records = [
{ id: 'Employee', params:[]},
{ id: 'Skills', params:[]},
{ id: 'Payroll', params:[]},
{ id: 'Appraisal', params:[]},
{ id : 'Statistics',params:[]}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul ng-app="myApp" ng-controller="MyController">
<li ng-repeat="item in records">
<div ng-show="currentSelection=='Admin' && item.id=='Statistics'">{{item.id}}
</div>
</li>
</ul>

Your check is wrong,
1) It should be ng-show="currentSelection=='Admin' if you want to show every list items.
2) It should be ng-show="currentSelection=='Guest ' ||currentSelection=='Employee' && item.id!=='Statistics'" if you want to show every list items except statistics.
var app = angular.module("myApp", []);
app.controller("MyController", function ($scope) {
$scope.currentSelection = "Admin";
$scope.records = [
{ id: 'Employee', params:[]},
{ id: 'Skills', params:[]},
{ id: 'Payroll', params:[]},
{ id: 'Appraisal', params:[]},
{ id : 'Statistics',params:[]}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
<ul ng-show="currentSelection=='Admin'">
<li ng-repeat="item in records">
{{item.id}}
</li>
</ul>
<ul ng-show="currentSelection=='Guest' || currentSelection=='Employee'">
<li ng-repeat="item in records" ng-if="item.id!=='Statistics'">
{{item.id}}
</li>
</ul>
</div>

You can put a check on li tag itself. no need of extra div to put check. This will remove blank li bulltes.
var app = angular.module("myApp", []);
app.controller("MyController", function ($scope) {
$scope.currentSelection = "Admin";
$scope.records = [
{ id: 'Employee', params:[]},
{ id: 'Skills', params:[]},
{ id: 'Payroll', params:[]},
{ id: 'Appraisal', params:[]},
{ id : 'Statistics',params:[]}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul ng-app="myApp" ng-controller="MyController">
<li ng-repeat="item in records" ng-if="currentSelection=='Admin' && item.id!=='Statistics'">
<div >{{item.id}}
</div>
</li>
</ul>

Use ng-if instance of ng-show
var app = angular.module("myApp", []);
app.controller("MyController", function ($scope) {
$scope.currentSelection = "Admin";
$scope.records = [
{ id: 'Employee', params:[]},
{ id: 'Skills', params:[]},
{ id: 'Payroll', params:[]},
{ id: 'Appraisal', params:[]},
{ id : 'Statistics',params:[]}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
<ul ng-repeat="item in records">
<li ng-if="currentSelection === 'Admin' && item.id!=='Statistics'">
<div>{{item.id}}</div>
</li>
</ul>
</div>

You need to Change your show condition currentSelection === 'Admin' && item.id === 'Statistics' to currentSelection === 'Admin' && item.id !== 'Statistics'.
var app = angular.module("myApp", []);
app.controller("MyController", function ($scope) {
$scope.currentSelection = "Non";
$scope.records = [ { id: 'Employee', params:[]},
{ id: 'Skills', params:[]},
{ id: 'Payroll', params:[]},
{ id: 'Appraisal', params:[]},
{ id : 'Statistics',params:[]}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul ng-app="myApp" ng-controller="MyController">
<div ng-if="currentSelection === 'Admin'">
<li ng-repeat="item in records">
<div>{{item.id}}</div>
</li>
</div>
<div ng-if="currentSelection !== 'Admin'">
<li ng-repeat="item in records" ng-show="item.id !== 'Statistics'">
<div>{{item.id}}</div>
</li>
</div>
</ul>

AngularJS disable dropdown option which previously selected

var demoApp = angular.module('myApp', []);
demoApp.controller('QaController', function($scope, $http) {
$scope.loopData = [{}, {}];
$scope.questions = {
model: null,
availableOptions: [
{id: '1', name: 'What is your childhood name?'},
{id: '2', name: "What is your first school?"},
{id: '3', name: "What is your first job place?"},
{id: '4', name: "What is your pet name?"}
]
};
$scope.submit = function() {
$scope.result = $scope.loopData;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div class="wrapper wrapper-content middlealigen col-sm-12" ng-controller="QaController">
<form ng-submit="submit();">
<div ng-repeat="x in loopData">
<h5>Q. {{$index + 1}}</h5>
<select class="form-control" name="question-drop" id="question_dropdown" ng-model="x.question" ng-options="option.id as option.name for option in questions.availableOptions">
<option value="">Select Question</option>
</select>
<input type="text" placeholder="Enter Answer" name="answer" class="form-control" ng-model="x.answer" />
<div class="m-b"></div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<div ng-if="result">
<pre>{{result | json}}</pre>
</div>
</div>
</body>
Can you please check my code snippet. Here is two dropdown.
If I select What is your childhood name? from Q. 1 dropdown then this option should be disabled in the Q. 2 dropdown. How can I do that?

var demoApp = angular.module('myApp', []);
demoApp.controller('QaController', function($scope, $http) {
$scope.loopData = [];
$scope.loopData = [{
model: null,
question : "",
availableOptions: [
{id: '1', name: 'What is your childhood name?',disable : false},
{id: '2', name: "What is your first school?",disable : false},
{id: '3', name: "What is your first job place?",disable : false},
{id: '4', name: "What is your pet name?",disable : false}
]
},{
model: null,
question : "",
availableOptions: [
{id: '1', name: 'What is your childhood name?',disable : false},
{id: '2', name: "What is your first school?",disable : false},
{id: '3', name: "What is your first job place?",disable : false},
{id: '4', name: "What is your pet name?",disable : false}
]
}]
$scope.changItem = function(index,_id){
$scope.loopData = $scope.loopData.map(function(obj,i){
debugger
if(i > index){
obj.availableOptions.map(function(item){
if(item.id == _id ){
item.disable = true
}else{
item.disable = false
}
return item
})
}else{ debugger
obj.availableOptions.map(function(item){
debugger
if(item.id == _id ){
item.disable = true
}else{
item.disable = false
}
return item
})
}
return obj
});
}
$scope.submit = function() {
$scope.result = $scope.loopData;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div class="wrapper wrapper-content middlealigen col-sm-12" ng-controller="QaController">
<form ng-submit="submit();">
<div ng-repeat="x in loopData track by $index">
<h5>Q. {{$index + 1}}</h5>{{x.modelVal}}
<select
ng-change="changItem($index,x.question)" ng-model="x.question" >
<option value="">Select Question</option>
<option ng-disabled="option.disable" ng-repeat="option in x.availableOptions" value="{{option.id}}">{{option.name}}</option>
</select>
<input type="text" placeholder="Enter Answer" name="answer" class="form-control" ng-model="x.answer" />
<div class="m-b"></div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<div ng-if="result">
<pre>{{result | json}}</pre>
</div>
</div>
</body>

You might create a custom filter to be more generic (for more select inputs).
The filter could be:
.filter('excludeEqualAnswers', function() {
return function(input, index, selectedQuestions) {
if (!selectedQuestions[index].question) {
function notExistInSelectedQuestions(output) {
return !selectedQuestions.map(val => val.question).includes(output.id);
}
return input.filter(notExistInSelectedQuestions);
} else {
return input
}
}
})
Then you can filter the options of your select input based upon your custom filter like this:
<select class="form-control" name="question-drop" id="question_dropdown" ng-model="x.question" ng-options="option.id as option.name for option in questions.availableOptions | excludeEqualAnswers:$index:loopData">
<option value="">Select Question</option>
</select>
Here's a working fiddle

Filtering array based on selected checkboxes and select fields

How can I store the selected values of checkboxes and select elements and use a combination of these to filter a results array? e.g. think filtering by category Id, or displaying all results in the last X months.
After much research and trial and error I've got as far as this:
View Plunker or see the code below:
HTML within the 'refine' directive
<div class="filters">
<div class="filter">
<label for="maxage">Show results from</label>
<select name="maxage" id="maxage"
ng-options="option.name for option in refine.maxAge.options track by option.id"
ng-model="refine.maxAge.selected"
ng-change="filterResults()">
</select>
</div>
<div class="filter">
<div class="status-filter" ng-repeat="status in refine.statuses">
<label for="statusId{{ status.id }}">{{ status.name }}</label>
<input type="checkbox" name="status" value="{{ status.id }}" ng-change="filterResults()">
</div>
</div>
</div>
HTML of main page
<body ng-app="app">
<div ng-controller="ListCtrl" data-county-parish-id="1478">
...
<main class="page-content columns medium-9 medium-push-3">
...
<spinner name="planningSpinner" show="true">
<div class="loadingPanel block"></div>
</spinner>
<div class="planning">
<div class="no-results ng-hide" ng-show="filteredResults.length === 0">
<p>No results.</p>
</div>
<h4>Number of records: {{ filteredResults.length }}</h4>
<div ng-repeat="appl in filteredResults">
<hf-application info="appl"></hf-application>
</div>
</div>
...
</main>
<aside class="sidebar columns medium-3 medium-pull-9">
...
<div hf-refine-results info="refine"></div>
</aside>
...
</div>
</body>
JS
var app = angular.module('app', []);
// results filter
angular.module('app').filter('results', ['$filter', function($filter) {
return function (input, refine) {
var filterParams = {};
// start off filtering with the outsideBoundary parameter
filterParams.outsideBoundary = refine.outsideBoundary;
// add 'show results from' filter
//var adjustedDate = new Date();
//adjustedDate.setMonth(adjustedDate.getMonth() - refine.maxAge.selected.id);
//filterParams.receivedDate = $filter('date')(adjustedDate, 'yyyy/MM/dd');
return $filter('filter')(input, filterParams);
}
}]);
// Controller
angular.module('app').controller('ListCtrl',
['$scope', '$filter', '$attrs', 'appService', 'resultsFilter', function ($scope, $filter, $attrs, appService, resultsFilter) {
$scope.applications = [];
$scope.refine = {
statuses: {
options: [
{ id: 1, name: 'Unknown' },
...
{ id: 6, name: 'Appealed' }
],
selected: [2, 3]
},
maxAge: {
options: [
{ id: '1', name: 'Last month' },
... // 1 to 12 months
{ id: '12', name: 'Last 12 months' }
],
selected: { id: '6', name: 'Last 6 months' }
},
...
};
$scope.filterResults = function () {
$scope.filteredResults = resultsFilter($scope.applications, $scope.refine);
};
/* get data from appService */
appService.getApplications({
status: 3,
countyparish: parseInt($attrs.countyParishId),
postcode: '',
distance: 5,
pagesize: 100
})
.then(function (data) {
$scope.applications = data;
$scope.filteredResults = resultsFilter(data, $scope.refine);
});
}]);
I appreciate this question has been asked many times, however I haven't found an answer for my question(s) since most examples are very simple expressions within ng-repeat.

This example work with multi checkbox. For filtering with outher select use same logic. Look
'use strict';
var App = angular.module('clientApp', ['ngResource', 'App.filters']);
App.controller('ClientCtrl', ['$scope', function ($scope) {
$scope.selectedCompany = [];
$scope.companyList = [{
id: 1,
name: 'Apple'
}, {
id: 2,
name: 'Facebook'
}, {
id: 3,
name: 'Google'
}];
$scope.clients = [{
name: 'Brett',
designation: 'Software Engineer',
company: {
id: 1,
name: 'Apple'
}
}, {
name: 'Steven',
designation: 'Database Administrator',
company: {
id: 3,
name: 'Google'
}
}, {
name: 'Jim',
designation: 'Designer',
company: {
id: 2,
name: 'Facebook'
}
}, {
name: 'Michael',
designation: 'Front-End Developer',
company: {
id: 1,
name: 'Apple'
}
}, {
name: 'Josh',
designation: 'Network Engineer',
company: {
id: 3,
name: 'Google'
}
}, {
name: 'Ellie',
designation: 'Internet Marketing Engineer',
company: {
id: 1,
name: 'Apple'
}
}];
$scope.setSelectedClient = function () {
var id = this.company.id;
if (_.contains($scope.selectedCompany, id)) {
$scope.selectedCompany = _.without($scope.selectedCompany, id);
} else {
$scope.selectedCompany.push(id);
}
return false;
};
$scope.isChecked = function (id) {
if (_.contains($scope.selectedCompany, id)) {
return 'icon-ok pull-right';
}
return false;
};
$scope.checkAll = function () {
$scope.selectedCompany = _.pluck($scope.companyList, 'id');
};
}]);
angular.module('App.filters', []).filter('companyFilter', [function () {
return function (clients, selectedCompany) {
if (!angular.isUndefined(clients) && !angular.isUndefined(selectedCompany) && selectedCompany.length > 0) {
var tempClients = [];
angular.forEach(selectedCompany, function (id) {
angular.forEach(clients, function (client) {
if (angular.equals(client.company.id, id)) {
tempClients.push(client);
}
});
});
return tempClients;
} else {
return clients;
}
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular-resource.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<div ng-app="clientApp" data-ng-controller="ClientCtrl">
<ul class="inline">
<li>
<div class="alert alert-info">
<h4>Total Filtered Client: {{filtered.length}}</h4>
</div>
</li>
<li>
<div class="btn-group" data-ng-class="{open: open}">
<button class="btn">Filter by Company</button>
<button class="btn dropdown-toggle" data-ng-click="open=!open"><span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu">
<li><a data-ng-click="checkAll()"><i class="icon-ok-sign"></i> Check All</a>
</li>
<li><a data-ng-click="selectedCompany=[];"><i class="icon-remove-sign"></i> Uncheck All</a>
</li>
<li class="divider"></li>
<li data-ng-repeat="company in companyList"> <a data-ng-click="setSelectedClient()">{{company.name}}<span data-ng-class="isChecked(company.id)"></span></a>
</li>
</ul>
</div>
</li>
</ul>
<hr/>
<h3>Clients Table:</h3>
<table class="table table-hover table-striped">
<thead>
<tr>
<th style="width:10%">#</th>
<th style="width:20%">Name</th>
<th style="width:40%">Designation</th>
<th style="width:30%">Company</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="client in filtered = (clients | companyFilter:selectedCompany)">
<td>{{$index + 1}}</td>
<td><em>{{client.name}}</em>
</td>
<td>{{client.designation}}</td>
<td>{{client.company.name}}</td>
</tr>
</tbody>
</table>
</div>

Adding strict search to multiple fields with a single textbox

Have a basic angular app,
HTML
<input type="text" ng-model="txt.name" />
<ul>
<li ng-repeat="d in data | filter: txt:strict">
<span>{{d.name}}</span>
<br />
<span>{{d.description}}</span>
<br />
<span>{{d.loremipsum}}</span>
<br />
</li>
</ul>
JS:
var app = angular.module('app', []);
app.controller("mc", function($scope){
$scope.data = [{
'name': 'asd',
'description': 'jiocioasdiasidjpoasdko',
'loremipsum': 'loremipsum'
}, {
'name': 'qwe',
'description': 'poqwpeqwpe',
'loremipsum': 'loremipsum'
}, {
'name': 'czxc',
'description': 'asdasdasd',
'loremipsum': 'loremipsum'
}]
});
I want to be able to search by both name and description, but not by loremipsum
How can I do this?
Example on JS BIN

You can create your custom filter please see demo below
var app = angular.module('app', []);
app.controller("mc", function($scope) {
$scope.data = [{
'name': 'asd',
'description': 'jiocioasdiasidjpoasdko',
'loremipsum': 'loremipsum'
}, {
'name': 'qwe',
'description': 'poqwpeqwpe',
'loremipsum': 'loremipsum'
}, {
'name': 'czxc',
'description': 'asdasdasd',
'loremipsum': 'loremipsum'
}];
});
app.filter('customFilter', function() {
return function(items, string) {
var filtered = [];
var stringMatch = new RegExp(string, 'i');
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (stringMatch.test(item.name) || stringMatch.test(item.description)) {
filtered.push(item);
}
}
return filtered;
};
});
<html ng-app="app">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-controller="mc">
<input type="text" ng-model="txt.name" />
<ul>
<li ng-repeat="d in data | customFilter: txt.name">
<span>{{d.name}}</span>
<br />
<span>{{d.description}}</span>
<br />
<span>{{d.loremipsum}}</span>
<br />
</li>
</ul>
</body>
</html>

Here's an example using a custom function:
custom function solution
You will probably want to use match instead of === in the custom function.

Develop Reference

JavaScript is the programming language of the Web.

Uncheck all checkboxes based on another checkbox using Angularjs - javascript

Related

Unable to set selected option in dropdown control

Show/hide a record based on condition inside ng-repeat not working

AngularJS disable dropdown option which previously selected

Filtering array based on selected checkboxes and select fields

Adding strict search to multiple fields with a single textbox

Categories

Resources