I am new to angular. I have a json object:
[
{
"id": 1,
"name": "name1",
"speciality": "speciality1",
"address": "address1",
"phoneNumber": 9999999999
},
{
"id": 2,
"name": "name2",
"speciality": "speciality2",
"address": "address2",
"phoneNumber": 9999999999
},
...
]
and I want to filter based on two properties: name and speciality. This search is matching insensitive substring. How to do this? The way I am doing this is as follows, which doesn't work:
$filter('filter')(doctor.details, { $: query }, false, [name, speciality]);
$filter('filter')(doctor.details, { name: query } || {speciality : query }, false);
doctor.details is the json object array, query is the (sub)string to be matched with name or speciality.
You can write a AngularJS filter to filter out the list based on query matching name and speciality properties.
app.filter('filterDetails', function() {
return function(details, query) {
var filteredDetails = [];
filteredDetails = details.filter(function(obj) {
// look whether query is substring of name or speciality
if (~obj.name.indexOf(query) || ~obj.speciality.indexOf(query)) {
return obj;
}
})
// finally return filtered array
return filteredDetails;
};
});
HTML
Query :
<input type="text" ng-model="query" />
<ul>
<li ng-repeat="detail in doctor.details | filterDetails:query">
{{ detail }}
</li>
</ul>
Plunker
Did it using lodash as this was the easiest I could think of:
_.union($filter('filter')(doctor.details, { name: query }), $filter('filter')(doctor.details, { speciality: query }));
Related
My JSON data looks like the below code. Can you any one please help me to filter data by code/desc which is in the state property.
$scope.agent =
{
"0d297c1711de":
[{
"applicationName": "rewards-accounts", "agentId": "0d297c1711de",
"status": { "agentId": "0d297c1711de", "eventTimestamp": 1510580172247, "state": { "code": 100, "desc": "Running" } }
}],
"16f279d66923":
[{
"applicationName": "rewards-accounts-details", "agentId": "16f279d66923",
"status": { "agentId": "0d297c1711de", "eventTimestamp": 1510580172247, "state": { "code": 201, "desc": "Unexpected Shutdown" } }
}],
"203b353d32ef":
[{
"applicationName": "rewards-accounts-details", "agentId": "203b353d32ef",
"status": { "agentId": "0d297c1711de", "eventTimestamp": 1510580172247, "state": { "code": 200, "desc": "Shutdown" } }
}]
};
I have used this filter in ng-repeat . It is not working. selectedCode is my model data to be filtered.
| filter:{status:{ state: { code: **selectedCode**}}}
As stated in this SO
You need to pass in the argument to filter by, which in your particular case looks like:
ng-repeat="a in agent | filter: {status: {state: {code: filter.key}}}"
With thanks to #Ray
JSFiddle here for further reference.
Hope it helps.
You can use a custom filter to filter your nested data,
in your controller create your filter
$scope.customFilter = function (row) {
var result = false;
if($scope.filter == undefined || $scope.filter == ""){
result = true;
}
else{
angular.forEach(row, function(value, key){
if(value.state != undefined){
if(value.state.code == $scope.filter)
result = true;
}
});
}
return result;
};
and add this filter to your ng-repeat
<div ng-repeat="item in agent">
<div ng-repeat="x in item | filter:customFilter">
{{x}}
</div>
</div>
Demo
response object like
$scope.list= [
Object {
cid=74,
date="2016-08-25T00:00:00.000+0530",
optkey="key",
optvalue="{
value:{
'name':test,
'gender':male
}
}"
},
Object {
cid=75,
date="2016-08-25T00:00:00.000+0530",
optkey="key",
optvalue="{
value:{
'name':test2,
'gender':female
}
}"
}},
Object {
cid=77,
date="2016-08-26T00:00:00.000+0530",
optkey="key",
optvalue="{
value:{
'name':test1,
'gender':female
}
}"
}]
and in html page used ng-repeat
<div ng-repeat="item in list">
{{item.date}} -- works fine
</div>
here how to display json value in object optvalue, done some code like.
<div ng-repeat="item in list">
{{item.optvalue.value}} -- but it is undefined
</div>
but it is not working can any one give hint for this
Just because your optvalue is a String but not a object. It should be :
optvalue = {
value:{
'name':test1,
'gender':female
}
}
In JSON, an object should NOT be in the parenthese.
Try this working example, please check the object created.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.list=
[
{
cid:74, date:"2016-08-25T00:00:00.000+0530", optkey:"key", optvalue:{value:{'name':'test','gender':'male'}}
},
{
cid:75, date:"2016-08-25T00:00:00.000+0530", optkey:"key", optvalue:{value:{'name':'test','gender':'male'}}
},
{
cid:76, date:"2016-08-25T00:00:00.000+0530", optkey:"key", optvalue:{value:{'name':'test','gender':'male'}}
}
]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="item in list">
{{item.optvalue.value.name}}
</div>
</div>
The response JSON is not valid :
Strings should be wrapped in double quotes.
Expecting colon, not = in key value pairs.
Invalid characters found.
Invalid number.
Issue Capture :
Valid JSON :
[
{
"cid": 74,
"date": "2016-08-25T00:00:00.000+0530",
"optkey": "key",
"optvalue": {
"value": {
"name": "test",
"gender": "male"
}
}
},
{
"cid": 75,
"date": "2016-08-25T00:00:00.000+0530",
"optkey": "key",
"optvalue": {
"value": {
"name": "test2",
"gender": "female"
}
}
},
{
"cid": 77,
"date": "2016-08-26T00:00:00.000+0530",
"optkey": "key",
"optvalue": {
"value": {
"name": "test1",
"gender": "female"
}
}
}
]
In your case {{item.optvalue.value}} is giving undefined because optvalue is a string not an object.So, it should be an object.
"optvalue": {
"value": {
"name": "test1",
"gender": "female"
}
}
thanks for your answers,i have resolved it using--
angular.toJson and angular.fromJson
while send to server used
angular.toJson(stringOfJson)
and when got the response object the using
angular.fromJson(value)
and set to object field,it is working fine.
you need to change your code to this
<div ng-repeat="item in list">
{{item.optvalue.value.name}}
</div>
hi i have a JSON like this:
pages[
{
"id": "74682309",
"labels": [
{
"term": "test1",
"probability": 0.069
},
{
"term": "test2",
"probability": 0.037
}
]
}];
and using tags-input i want the tags to read only the term and show the term so i can show and update.
i have
<tags-input ng-model="se.labels"></tags-input>
the 'se' comes from ng-repeat="se in searchCtrl.pages
Based on the documentation (http://mbenford.github.io/ngTagsInput/documentation/api) you can change the keyProperty and displayProperty to make it use "term" instead of "text"
I've created a fiddle to demonstrate how you can obtain the data needed, considering that the provided JSON is a valid JSON. Your JSON is invalid.
var myApp = angular.module('myApp',['ngTagsInput']);
myApp.factory('data', function() {
var data = [
{
"id": "74682309",
"labels": [
{
"text": "test1",
"probability": 0.069
},
{
"text": "test2",
"probability": 0.037
}
]
}];
return data;
});
myApp.controller('MyCtrl', ['$scope', 'data', function($scope, data) {
var values = [];
data.map(function(elem) {
return elem.labels.forEach(function(el) {
values.push({
"text" : el.text
});
});
});
$scope.tags = values;
}]);
And the html part:
<div ng-controller="MyCtrl">
<div class="elem">
<tags-input ng-model="tags"></tags-input>
</div>
</div>
Here is the fiddle:
http://jsfiddle.net/HB7LU/16554/
Update:
You haven't included the angular ng-tags-input extension as a tag into your question. Please see my updated fiddle:
http://jsfiddle.net/HB7LU/16557/
I apologise if this has been answered already, but I'm new to Angular so might have missed it.
I have a need to provide multiple sets of checkbox lists, which need to be combined to create an AND query.
It's on Plunker here http://plnkr.co/OGmGkz22n4J4T8p74yto but enclosed below. At the moment I can select the bottom row and the correct names appear from storeArray, but I cannot work out how to add the Format array into the filter.
I've tried:
<div ng-repeat="store in storeArray | filter:(formatFilter && tillFilter)">
and
<div ng-repeat="store in storeArray | filter:formatFilter:tillFilter">
but they don't work.
Any suggestions please?
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.formatFilter = function(a) {
for (var fmt in $scope.formatsArray) {
var f = $scope.formatsArray[fmt];
if (f.on && a.format.indexOf(f.name) > -1) {
return true;
}
}
};
$scope.tillFilter = function(a) {
for (var till in $scope.tillsArray) {
var t = $scope.tillsArray[till];
if (t.on && a.tills.indexOf(t.name) > -1) {
return true;
}
}
};
$scope.formatsArray = [{
name: "Super",
on: false
}, {
name: "Express",
on: false
}, {
name: "Other",
on: false
}];
$scope.tillsArray = [{
name: "Main",
on: false
}, {
name: "Service",
on: false
}, {
name: "Petrol",
on: false
}];
$scope.storeArray = [{
"id": "1",
"name": "101",
"format": "Super",
"tills": ["Main", "Service", "Petrol"]
}, {
"id": "2",
"name": "102",
"format": "Express",
"tills": ["Main", "Service"]
}, {
"id": "3",
"name": "103",
"format": "Other",
"tills": ["Main", "Petrol"]
}, {
"id": "4",
"name": "104",
"format": "Super",
"tills": ["Service", "Petrol"]
}];
}
While you can chain filters together like this:
<div ng-repeat="store in storeArray | filter:formatFilter | filter:tillFilter)">
This won't fix your problem since the first filter will do it's job, and filter items out that you may want to include in your second filter. I'm not sure of any way to do an "or" filter. Is there any reason you can't do a custom filter that includes both? I modified your plunker with a custom filter:
http://plnkr.co/edit/han1LFl7toTsSX27b9Q0?p=preview
The code isn't super clean... it does the job. :) You may want to polish it up a bit.
I have next json structure:
{
"items": [
{"name":"item1"},
{"name":"item2"},
{"name": "item3"}
],
"groups": [{
"name": "group1",
"items": ["item1", "item3"]
},
{
"name": "group2",
"items": ["item2", "item3"]
},
{
"name": "group3",
"items": ["item1", "item2"]
}]
}
As you can see in my groups I have names of the items.
Is there a way in angularjs to automatically update strings in group > items, when the name of the particular item change. (Is there a way to connect particular parts of the json model?)
Thank you.
You can set up a deep $watch for each item in the item array. When the item changes, iterate over the group items, and replace the old name with the new name:
angular.forEach($scope.model.items, function (item) {
$scope.$watch(function () { return item; }, function (newVal, oldVal) {
angular.forEach($scope.model.groups, function (group) {
var items = group.items;
var itemIndex = items.indexOf(oldVal.name);
if (itemIndex >= 0) {
items[itemIndex] = newVal.name;
}
});
}, true);
});
Demo Fiddle