I have a form that displays dropdown select boxes for states and counties, everything it working ok, except when I choose a state with a single digit, say the number "1" the filter will include the other states that also have number "1" in them. I need to filter exactly or "true" but not sure how the code should look for that, I'm still learning Angular.
Here's my Javascript:
var app = angular.module('app', []);
app.controller('myController', function($scope) {
$scope.projects = [{
name: 'First thing',
state: 'CA',
stateID: '1',
county: 'Orange',
countyID: '191'
}, {
name: 'Another Thing',
state: 'CA',
stateID: '1',
county: 'LosAngeles',
countyID: '190'
}, {
name: 'In California',
state: 'CA',
stateID: '1',
county: 'Orange',
countyID: '191'
}, {
name: 'Hey Arizona!',
state: 'Arizona',
stateID: '13',
county: 'Multiple Counties',
countyID: '3178'
},{
name: 'hello Utah',
state: 'Utah',
stateID: '14',
county: 'Utah County',
countyID: '200'
}];
$scope.st_option = [{
state: "California",
stateID: "1"
}, {
state: "Arizona",
stateID: "13"
},{
state: "Utah",
stateID: "14"
}];
$scope.co_option = [{
county: "Orange",
countyID: "191",
co_state_id: "1"
}, {
county: "Multiple Counties",
countyID: "3178",
co_state_id: "13"
}, {
county: "Sonoma",
countyID: "218",
co_state_id: "1"
}, {
county: "Los Angeles",
countyID: "190",
co_state_id: "1"
}, {
county: "Utah County",
countyID: "200",
co_state_id: "14"
}];
$scope.filter = {};
$scope.clearFilter = function() {
$scope.filter = {};
};
});
And the View:
<div ng-app='app' ng-controller='myController'>
<h3>Records: {{(projects|filter:filter).length}} of {{projects.length}}</h3>
<p><input type="text" name="generalSearch" placeholder="Search Project Title" ng-model="filter.name"></p>
<p><select ng-model="filter.stateID"
ng-options="item.stateID as item.state for item in st_option"></select>
<select ng-model="filter.countyID"
ng-options="item.countyID as item.county for item in co_option | filter:{ co_state_id : filter.stateID }">
</select></p>
<p>Reset Filters</p>
<div ng-repeat="project in projects | filter:filter">
<div>
<br>Name: {{ project.name }}
<br>State: {{project.state}}
<br>County: {{project.county}}
<br>
<span ng-hide="{{project.stateID}} "></span>
<span ng-hide="{{project.countyID}} "></span>
</div>
</div>
</div>
And a fiddle:
https://jsfiddle.net/webmastersean/4m2d5n8u/
Set the last parameter of your filter to true, see the comparator parameter:
<div ng-repeat="project in projects | filter:filter:true">
Edit to allow for multiple filters:
<input type="text" name="generalSearch" placeholder="Search Project Title" ng-model="filter2.name">
<div ng-repeat="project in projects | filter:filter:true | filter:filter2">
Related
My JSON file
{
records: [
{
Name: "Alfreds Futterkiste",
City: "Berlin",
Country: "Germany"
},
{
Name: "Ana Trujillo Emparedados y helados",
City: "México D.F.",
Country: "Mexico"
},
{
Name: "Antonio Moreno Taquería",
City: "México D.F.",
Country: "Mexico"
},
{
Name: "Around the Horn",
City: "London",
Country: "UK"
}
]
}
How can I filter only name of user with Country: "Mexico" or "Germany" with AngularJS ?
If you care about performance you should better no use $filter provider. Instead you should go for a custom code.
You should better maintain a list of filtered records.
<div ng-controller="AppController as app">
<label ng-repeat="country in app.availableCountries track by $index">
<input type="checkbox" ng-model="country.selected" ng-click="app.filterByCountries()"> {{country.name}}
</label>
<h2>Filtered Records</h2>
<div ng-repeat="record in app.filteredRecords">
{{record | json}}
</div>
</div>
And perform filtering functionality in your controller.
angular.module('app', [])
.controller("AppController", function() {
this.records = [{
Name: "Alfreds Futterkiste",
City: "Berlin",
Country: "Germany"
}, {
Name: "Ana Trujillo Emparedados y helados",
City: "México D.F.",
Country: "Mexico"
}, {
Name: "Antonio Moreno Taquería",
City: "México D.F.",
Country: "Mexico"
}, {
Name: "Around the Horn",
City: "London",
Country: "UK"
}];
this.filteredRecords = [];
this.availableCountries = _.uniq(this.records.map(record => record.Country)).map(country => {
return {
name: country
}
});
this.filterByCountries = () => {
const lowerCaseCountries = this.availableCountries.filter(country => country.selected).map(country => country.name.toLowerCase());
if (!lowerCaseCountries.length) {
this.filteredRecords = angular.copy(this.records);
return;
}
this.filteredRecords = angular.copy(this.records.filter(record => lowerCaseCountries.includes(record.Country.toLowerCase())));
}
this.filterByCountries();
})
Here's a working fiddle demonstrating your case. Feel free to ask anything.
Try this ..
var app = angular.module('myapp', []);
app.controller('myctrl', function($scope) {
$scope.data = records: [
{
Name: "Alfreds Futterkiste",
City: "Berlin",
Country: "Germany"
},
{
Name: "Ana Trujillo Emparedados y helados",
City: "México D.F.",
Country: "Mexico"
},
{
Name: "Antonio Moreno Taquería",
City: "México D.F.",
Country: "Mexico"
},
{
Name: "Around the Horn",
City: "London",
Country: "UK"
}
];
$scope.filteredData = $scope.data.filter(function(d) {
return d.Country === 'Mexico' || d.Country === 'Germany'
});
});
I am new to use AngularJS and I am an absolute beginner. I tried using filters. I tried binding to the properties instead of directly binding the object. But the code shows {{x.people}} as the output instead of showing the list. What am I missing out here?
<!DOCTYPE html>
<html>
<head>
<title>ANGULAR APP</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<body ng-app="myApp" ng-controller="myFirstController">
<p>Type a letter in the input field:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in model.people">
{{ x.name }}
</li>
</ul>
</body>
<script>
var app = angular.module('myApp', []);
var myFirstController = function($scope) {
$scope.model = {
people: [{
name: 'Jani',
country: 'Norway'
},
{
name: 'Carl',
country: 'Sweden'
},
{
name: 'Margareth',
country: 'England'
},
{
name: 'Hege',
country: 'Norway'
},
{
name: 'Joe',
country: 'Denmark'
},
{
name: 'Gustav',
country: 'Sweden'
},
{
name: 'Birgit',
country: 'Denmark'
},
{
name: 'Mary',
country: 'England'
},
{
name: 'Kai',
country: 'Norway'
}
];
};
}
app.controller('myFirstController', myFirstController);
</script>
</html>
there is an unnecessary ; at the end of your json data:
$scope.model = {
people:[
... // your data
{name:'Kai',country:'Norway'}]; // <------ here the ; is illegal
};
}
refer below fixed example:
var app = angular.module('myApp', []);
var myFirstController = function($scope) {
$scope.model = {
people: [{
name: 'Jani',
country: 'Norway'
},
{
name: 'Carl',
country: 'Sweden'
},
{
name: 'Margareth',
country: 'England'
},
{
name: 'Hege',
country: 'Norway'
},
{
name: 'Joe',
country: 'Denmark'
},
{
name: 'Gustav',
country: 'Sweden'
},
{
name: 'Birgit',
country: 'Denmark'
},
{
name: 'Mary',
country: 'England'
},
{
name: 'Kai',
country: 'Norway'
}
]
};
}
app.controller('myFirstController', myFirstController);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myFirstController">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in model.people | filter: {name: test}">
{{ x.name }}
</li>
</ul>
</div>
I hope the title of this question is not confusing to anyone - but I need to figure out something that seems very basic but I can't seem to "get it"...
Basically I have multiple filters, and two of them filter on numbers. But, if one number is say "1" (California in the example on jsFiddle) and another is "13" (Arizona) filtering will include both if I select "1".
Here's my HTML:
<div ng-app='app' ng-controller='myController'>
<h3>Records: {{(projects|filter:filter).length}} of {{projects.length}}</h3>
<p><input type="text" name="generalSearch" placeholder="Search Project Title" ng-model="filter.name"></p>
<p><select ng-model="filter.stateID"
ng-options="item.stateID as item.state for item in st_option"> </select>
<select ng-model="filter.countyID"
ng-options="item.countyID as item.county for item in co_option | filter:{ co_state_id : filter.stateID }">
</select></p>
<p>Reset Filters</p>
<div ng-repeat="project in projects | filter:filter">
<div>
<br>Name: {{ project.name }}
<br>State: {{project.state}}
<br>County: {{project.county}}
<br>
<span ng-hide="{{project.stateID}} "></span>
<span ng-hide="{{project.countyID}} "></span>
</div>
JAVASCRIPT CODE:
var app = angular.module('app', []);
app.controller('myController', function($scope) {
$scope.projects = [{
name: 'First thing',
state: 'CA',
stateID: '1',
county: 'Orange',
countyID: '191'
}, {
name: 'Another Thing',
state: 'CA',
stateID: '1',
county: 'LosAngeles',
countyID: '190'
}, {
name: 'In California',
state: 'CA',
stateID: '1',
county: 'Orange',
countyID: '191'
}, {
name: 'Hey Arizona!',
state: 'Arizona',
stateID: '13',
county: 'Multiple Counties',
countyID: '3178'
},{
name: 'hello Utah',
state: 'Utah',
stateID: '14',
county: 'Utah County',
countyID: '200'
}];
$scope.st_option = [{
state: "California",
stateID: "1"
}, {
state: "Arizona",
stateID: "13"
},{
state: "Utah",
stateID: "14"
}];
$scope.co_option = [{
county: "Orange",
countyID: "191",
co_state_id: "1"
}, {
county: "Multiple Counties",
countyID: "3178",
co_state_id: "13"
}, {
county: "Sonoma",
countyID: "218",
co_state_id: "1"
}, {
county: "Los Angeles",
countyID: "190",
co_state_id: "1"
}, {
county: "Utah County",
countyID: "200",
co_state_id: "14"
}];
$scope.filter = {};
$scope.clearFilter = function() {
$scope.filter = {};
};
});
I've created a jsFiddle here:
https://jsfiddle.net/webmastersean/4m2d5n8u/
I know I need to add "true" to the filter but I'm not sure where or how.
filter has a third parameter, a comparator function. As syntactic sugar, this third parameter can also take the value true to mean strict comparison. That means all you need to do is add :true to the end of your county filter:
<select ng-model="filter.countyID"
ng-options="item.countyID as item.county for item in co_option | filter:{ co_state_id : filter.stateID }:true">
</select>
Updated fiddle. Now when you select California you only get counties in California.
I have a Kendo UI grid that contains Name Objects, when I select a row I want to populate a form below. Currently the text inputs and date-picker work fine. But I combo box only has one way binding. I can change the value in the grid, but when I select a new row the value of the combobox doesnt change.
HTML
<div id="nd-names-tab" ng-controller="nd-names-controller">
<div id="nd-names-grid-section">
<div id="nd-names-grid"
kendo-grid="namesGrid"
k-data-source="namesData"
k-columns="nameGridColumns"
k-selectable="true"
k-reorderable="true"
k-on-change="selectedName = data"
k-toolbar="[
{ 'name': 'addName', template: '<button data-ng-click=\'addName()\' class=\'k-button\'>Add</button>' },
{ 'name': 'deleteName', template: '<button data-ng-click=\'deleteName()\' class=\'k-button\'>Delete</button>' }
]" >
</div>
</div>
<div id="nd-names-input-section">
<label>Name: <input type="text" class="k-textbox" ng-model="selectedName.lname"/></label>
<input type="text" class="k-textbox" ng-model="selectedName.fname" /> <br/>
<label>DOB: <input id="datepicker" ng-model="selectedName.dob"/></label>
<label>Gender: <input id="gender" ng-model="selectedName.gender"/></label> <br />
<label>Address: <input type="text" class="k-textbox" style="width: 200px" ng-model="selectedName.addr"/></label>
</div>
</div>
JS File
$("#datepicker").kendoDatePicker({
format: "dd/MM/yyyy"
});
$("#gender").kendoComboBox({
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Male", value: "Male" },
{ text: "Female", value: "Female" },
],
filter: "contains",
suggest: true
});
Angular Controller
app.controller('nd-names-controller', function($scope){
$scope.namesData = new kendo.data.ObservableArray([
{ fname: 'Joe', lname: 'Clark', addr: '1565 Main Rd.', dob: '14/08/1990', gender: 'Male'},
{ fname: 'Bob', lname: 'Smith', addr: '123 Main St.', dob: '23/03/1992', gender: 'Male'},
{ fname: 'Jane', lname: 'Smith', addr: '123 Main St.', dob: '25/06/1991', gender: 'Female'},
{ fname: 'Jane', lname: 'Smith', addr: '123 Main St.', dob: '25/06/1991', gender: 'Female'},
{ fname: 'Jane', lname: 'Smith', addr: '123 Main St.', dob: '25/06/1991', gender: 'Female'}
]);
$scope.nameGridColumns = [
{field: "fname", title: "First Name", width: "*" },
{field: "lname", title: "Last Name", width: "*" },
{field: "addr", title: "Address", width: "*" },
{field: "dob", title: "DOB", width: "*" },
{field: "gender", title: "Gender", width: "*" }
];
$scope.addName = function(e){
this.namesGrid.dataSource.add( { fname: '', lname: '', addr: '', dob: '', gender: ''} );
}
});
I am not sure how I am suppose to use angular to two way bind a combo box.
You are declaring the kendo combobox using Jquery. Instead create an options in you controller and pass it to kendo directive.
Directive:
<select id="slots" kendo-drop-down-list k-options="slotsOptions" style="width: 200px"></select>
In you angular controller
var dataSlotDuration = [
{ text: "10", value: "10" },
{ text: "15", value: "15" },
{ text: "20", value: "20" },
{ text: "30", value: "30" },
{ text: "60", value: "60" }
];
function onSelectSlotDuration(e) {
var dataItem = this.dataItem(e.item.index());
// this is the seled value from drop-drop-list
$scope.selectedSlotDuration = dataItem.value;
}
$scope.slotsOptions = {
dataSource: {
data: dataSlotDuration
},
dataTextField: "text",
dataValueField: "value",
optionLabel: "Choose Slot Duration...",
select: onSelectSlotDuration
}
Its in the Kendo Docs
This is my code
location: {
address: 'Google Headquarters',
city: 'Mountain View',
province: 'CA'
},
imageUrl: "img/angularjs-logo.png",
sessions: [
{
name: 'Directives Masterclass',
creatorName: 'Bob Smith',
duration: '1 hr',
level: 'Advanced',
abstract: 'In this sesison you will learn the ins and outs of directives!',
upVoteCount: 0
},
The image is not showing , this is the conroller.js, im using AngularJS v1.2.10.
<div ng-controller="EventController" style="padding-left:20px; padding-right:20px">
<img ng-src="{{event.imageUrl}}" alt="{{event.name}}" />
Maybe there is difference ways to show it , i dont get a error. I saw a toturial online and it does it the same way.
can anyone tell me what im doing wrong?
What you are supposed to have is the event variable in the scope of your controller to make it work:
Your controller:
app.controller('MainCtrl', function($scope) {
$scope.event = { location: {
address: 'Google Headquarters',
city: 'Mountain View',
province: 'CA'
},
title: "some title",
imageUrl: "http://plnkr.co/img/plunker.png",
sessions: [
{
name: 'Directives Masterclass',
creatorName: 'Bob Smith',
duration: '1 hr',
level: 'Advanced',
abstract: 'In this sesison you will learn the ins and outs of directives!',
upVoteCount: 0
},
]};
});
Your html:
<body ng-controller="MainCtrl">
<p><img ng-src="{{event.imageUrl}}" title="{{event.title}}" /></p>
</body>