I am new to angular and i am trying to build basic search + filter functionality
I am able to get search working but i am having difficulty with filter on unique skills (1,2,3 in this example)
I tried using "ng-click" and calling custom function but didn't get any solution
here is my code example :
<html lang="en">
<meta charset="UTF-8">
<title> Exercise</title>
<!--Angular JS-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module("app", []);
app.controller('person', ['$scope', function($scope ){
$scope.players = [{"name" : 'commonABC', 'skill' : 1},{"name" : 'commonXYZ', 'skill' : 3},{"name": 'SAMEqwe', 'skill': 1},{"name": 'SAMEjkl', 'skill': 2}]
$scope.search = function(row) {
return (angular.lowercase(row.name).indexOf(angular.lowercase($scope.player_filter) || '') !== -1);
};
}]);
</script>
</head>
<body>
<div ng-app="app">
<div ng-controller="person">
<input type="text" ng-model="player_filter" placeholder="search name">
<select>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
<br><br>
<div ng-repeat="player in players | filter: search">
<strong>name is :{{player.name}}</strong
<br>
<strong>and skill is :{{player.skill}}</strong>
<hr>
</div>
</div>
</div>
</body>
</html>
1) Your variable "search" is always empty because you forgot to set it as ng-model to your select list
Replace your select tag with
<select ng-model="search">
2) Set a custom number filter as below
myApp.filter('numFilter', function() {
return function(input, number) {
if(!number) return input;
var tmp = [];
for (var i = 0; i < input.length; i++) {
if (input[i].skill == number) tmp.push(input[i]);
}
return tmp;
}
});
And change your ng-repeat to
<div ng-repeat="player in players | numFilter:search | filter:player_filter">
Working fiddle
Related
I have a select with ng-options + filter and need to apply a condition to the filter itself. So if a specific condition is met then apply the filter otherwise don't. Thanks in advance.
# example
if (elb_vm.elbInstances[index]['new_record?']){
apply ng-options filter.
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<section ng-app="myApp">
<div ng-controller="AppCtrl">
<select ng-model="selected"
ng-options="('Subnet: ' + type) for type in types | filter: '!public' : true">
</select>
</div>
</section>
You can use two select elements, one with filter and other without filter and show them based on ng-if like:
ng-if="elb_vm.elbInstances[index]['new_record?']"
Demo:
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
$scope.selected = "";
$scope.condition = false;
$scope.types = ["publicExtra","public","private"];
$scope.toggleCondition = function(){
$scope.condition = !$scope.condition;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<section ng-app="myApp">
<div ng-controller="AppCtrl">
<button ng-click="toggleCondition()">Toggle Condition</button> {{ condition }}<br><br>
<select ng-model="selected" ng-if="condition"
ng-options="('Subnet: ' + type) for type in types | filter: '!public' : true">
</select>
<select ng-model="selected" ng-if="!condition"
ng-options="('Subnet: ' + type) for type in types">
</select>
</div>
</section>
I have a json skills , I need to multiselect the skills from dropdown model.skills , I use multipleSkills()to push the selected values in arrayvalues[], but I should not push duplicate values into arrayvalues.
Json :
var skills =
[{"name":{"skillId":1,"skillName":"JAVA"}},
{"name":{"skillId":2,"skillName":"C"}},
{"name":{"skillId":3,"skillName":"DEVOPS"}},
{"name":{"skillId":4,"skillName":"ANGULAR JS"}},
{"name":{"skillId":41,"skillName":"drupal"}},
{"name":{"skillId":42,"skillName":"backbone js"}},
{"name":{"skillId":43,"skillName":"nodejs"}},
{"name":{"skillId":44,"skillName":"phone gap"}},
{"name":{"skillId":45,"skillName":"scala"}},
{"name":{"skillId":46,"skillName":"spark"}}]
html:
<input class="form-control1" type="text" name="skills" placeholder="Core Skills"
ng-model="model.Skills" ng-focus="skillsforJobs(model.Skills)"
typeahead ="skill as skill.name.skillName for skill in skills | filter:$viewValue | limitTo:10"
typeahead-on-select="multipleSkills(model.Skills)"
ng-minlength =1 />
JS:
$scope.arrayvalues = [];
$scope.multipleSkills = function(data){
if($scope.arrayvalues.length <1){
$scope.arrayvalues.push(data);
} else if($scope.arrayvalues.length > 0){
if($scope.arrayvalues.indexOf($scope.model.Skills) == -1) {
if($scope.model.Skills != ""){
for( var i=0; i<$scope.arrayvalues.length;i++){
$scope.arrayvalues[i].name.skillId.indexOf( data.name.skillId){
$scope.arrayvalues.push(data);
$scope.model.Skills = "";
}
}
}
}
please refer this github project.
AngularJS Dropdown Multiselect
html
<script type="text/javascript" src="angularjs-dropdown-multiselect.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-dropdown-multiselect="" options="example1data" selected-model="example1model"></div>
</div>
js
var app = angular.module('myApp', ['angularjs-dropdown-multiselect']);
app.controller('myCtrl', function($scope) {
});
I'm trying to get multiple Angular Material checkboxes with the same ng-model. I have two problems: how to get default checked checkboxes, and how to make at least one of these checkboxes to be required. I tried with ng-checked, but then I can't POST the values through the form.
HTML
<label for="inputPassword3" class="col-sm-2 control-label">Školski sat *</label>
<div class="col-sm-10" >
<span class="col-sm-2" ng-repeat="period in periods">
<md-checkbox ng-model="form.periods[period]" ng-click="toggle(period, selected)">
{{ period }}. sat
</md-checkbox>
</span>{{selected | json}}
</div>
App.js
$scope.periods = [1,2,3,4,5,6,7,8,9,0]; /*broj sati*/
$scope.selected = [2];
$scope.toggle = function (period, list) {
var idx = list.indexOf(period);
if (idx > -1) {
list.splice(idx, 1);
}
else {
list.push(period);
}
};
$scope.exists = function (period, list) {
return list.indexOf(period) > -1;
};
Please, help.
Actually your ngModel is an object, so to get selected value rendered on load, you should do the following:
$scope.model = {};
$scope.model.periods = {"2": true};
And to get all selected checkboxes you should iterate over the keys, as below:
$scope.save = function() {
// Get all checked boxes
var checked = Object.keys($scope.model.periods).filter(function(key) {
return $scope.model.periods[key];
});
console.log(checked);
}
See it working:
(function() {
angular
.module('app', ['ngMaterial'])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope'];
function MainCtrl($scope) {
$scope.model = {};
$scope.model.periods = {"2": true};
$scope.periods = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]; /*broj sati*/
$scope.save = function() {
// Get all checked boxes
var checked = Object.keys($scope.model.periods).filter(function(key) {
return $scope.model.periods[key];
});
console.log(checked);
}
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="form">
<div class="col-md-12">
<label for="inputPassword3" class="col-sm-2 control-label">Školski sat *</label>
<div class="col-sm-10">
<span class="col-sm-2" ng-repeat="period in periods">
<md-checkbox ng-model="model.periods[period]">
{{ period }}. sat
</md-checkbox>
</span>
</div>
<span ng-bind="model.periods | json"></span>
<hr>
<button type="button" class="btn btn-success" ng-click="save()">Save data</button>
</div>
</form>
</body>
</html>
I hope it helps.
I have a select drop down in Angular based HTML like below. The requirement is to filter the drop down values based on the text the user enter in a text input box. The drop down value in this select is op
How do I add the filter.
<select class="form-control" size="12" data-ng-model="selItem.SelectedItems"
ng-options="option as displaycodeandlabel(option,selItem.isCodeonLabel)disable when option.disabled==true for option in ::a.sData"></select>
Not sure about your data structure, but generally you can just use the native filter.
Here's a working demo:
(function() {
angular
.module('app', [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope'];
function MainCtrl($scope) {
$scope.a = {};
$scope.a.sData = [
{
"vm":"0000",
"dm":"U.S. city average",
"disabled":false
},
{
"vm":"0100",
"dm":"Northeast urban",
"disabled":false
},
{
"vm":"0200",
"dm":"Midwest urban",
"disabled":false
}
];
$scope.displayCodeandLabel = function(item, displayCode) {
return displayCode ? item.vm + " " + item.dm : item.dm;
}
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body ng-controller="MainCtrl">
<div class="col-md-12">
<label for="search">Search</label>
<input type="text" id="search" class="form-control" placeholder="Search" ng-model="search">
<hr>
<select class="form-control" size="12" data-ng-model="selItem.SelectedItems" ng-options="option as displayCodeandLabel(option, selItem.isCodeonLabel)
disable when option.disabled == true for option in a.sData | filter: search"></select>
</div>
</body>
</html>
I have the following code :-
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="ctrl" ng-init="init()">
<div class="container" style="width:400px">
<div class="panel panel-default">
<div class="panel-body">
<form>
<div class="form-group">
<label for="selectedBasket">Select basket :</label>
<select id="selectedBasket" class="form-control" ng-model="selectedBasket" ng-options="b.name for b in baskets">
</select>
</div>
<div ng-repeat="f in fruits" class="checkbox">
<label>
<input type="checkbox" value="" ng-checked="selectedBasket !== null && selectedBasket.items.indexOf(f) !== -1">
{{ f }}
</label>
</div>
</form>
</div>
</div>
</div>
<script>
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.init = function() {
$scope.baskets = [{'name': 'mary', 'items': ['apple', 'orange']}, {'name': 'jane', 'items': ['banana']}];
$scope.fruits = ['apple', 'banana', 'cherry', 'orange', 'watermelon'];
$scope.selectedBasket = null;
};
});
</script>
</body>
</html>
if I select Mary or Jane, I can correctly see the correct items in their basket checked. However if I manually check all the fruits and then look at Mary or Jane, it doesn't exclude the items that are not in their baskets. Why is ng-checked failing?
Bonus question, is it best practise to set selectedBasket to null and checking for null in a directive assuming I want nothing as a default value, is there a better way?
You've got no ng-model in your checkbox so your manual action isn't registered anywhere.
ng-checked is only used to make a 'slave' checkbox it can take no manual action.
My guess is you should use a ng-model initialized to your ng-check value instead of using a ng-checked.
If you want to keep your ng-checked what you can do is :
<input type="checkbox" ng-click="selectedBasket.items.push(f)" ng-checked="selectedBasket !== null && selectedBasket.items.indexOf(f) !== -1">
in fact it's still wrong... must be tired, use a toogle function in your ng-click which add or remove the item should be better...
Had the same problem with ng-check, tried everything but nothing worked. I wanted to control the number of checked Items when clicked to 2, so I used the $Event sent with ng-click and disable it.
Here is a sample code:
<input type="checkbox" ng-click="toggleCheck($event, product._id);"
ng-checked="isChecked(product._id)">
$scope.toggleCheck($event, productId){
if ( $scope.featuredProducts.indexOf(productId) === -1) {
if ($scope.featuredProducts.length < 2) {
$scope.featuredProducts.push(productId);
}else {
$event.preventDefault();
$event.stopPropagation();
}
} else {
$scope.featuredProducts.splice( $scope.featuredProducts.indexOf(productId), 1);
}
}
$scope.isChecked(productId){
return ($scope.featuredProducts.indexOf(productId) !== -1);
}