I have a list of countries
countryList = ["India", "Australia", "USA", "Germany"]
I do I ng-repeat across above list.....it is not a dictionary.
I tried using ng-repeat="item in countryList track by $index" but it gave me back error. Some body can tell me why it is happening ?
Please find console log
Error: [$parse:syntax] http://errors.angularjs.org/1.3.15/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Bipv4Pub%7D%7D&p4=%7Bipv4Pub%7D%7D
at Error (native)
at https://jiodns.jio.com/js/angular.min.js:6:417
at ib.throwError (https://jiodns.jio.com/js/angular.min.js:191:165)
at ib.object (https://jiodns.jio.com/js/angular.min.js:200:324)
at ib.primary (https://jiodns.jio.com/js/angular.min.js:190:207)
at ib.unary (https://jiodns.jio.com/js/angular.min.js:197:478)
at ib.multiplicative (https://jiodns.jio.com/js/angular.min.js:197:205)
at ib.additive (https://jiodns.jio.com/js/angular.min.js:197:63)
at ib.relational (https://jiodns.jio.com/js/angular.min.js:196:435)
at ib.equality (https://jiodns.jio.com/js/angular.min.js:196:291)
Is countryList available on the scope ? If yes, there shouldn't be any problem. See this fiddle: http://jsfiddle.net/HB7LU/14183/
$scope.countryList = ["India", "Australia", "USA", "Germany"]
<div ng-repeat="country in countryList">
<p>{{country}}</p>
</div>
Related
I am trying to filter an array (list) of repeated objects, based on the value of one of the property. However I keep getting [filter: not array] error. Screenshot of the error:
angular error message
I have also tried adding this angular toArrayFIlter injector https://github.com/petebacondarwin/angular-toArrayFilter however, the error still pops out.
Any help is much appreciated!
My array:
var orders = [
{
"assignedBy": "system",
"serviceDate":"2017-11-13",
"serviceStartTime":"04:00 PM"
},
{
"assignedBy": "system",
"serviceDate":"2017-11-13",
"serviceStartTime":"07:00 AM"
}];
html
<ul ng-repeat="task in orders track by $index | filter: { serviceStartTime: '04:00 PM' }">
<li >
<p>{{task.serviceDate}}</p>
<p>{{task.serviceStartTime}}</p>
</li>
</ul>
You'll need to filter the array before iterating it, like this:
<ul ng-repeat="task in (orders | filter: { serviceStartTime: '04:00 PM' }) track by $index ">
i am very new to angular js.
i created the form using dynamic fields .there i need to create dynamic ng-model value like Field[lable.LabelID] here lable.LabelID is dynamic value
this is my template page
<form ng-submit="" ng-controller="saveOrder">
<table class="col-xs-12 col-sm-8 col-sm-offset-4">
<tr ng-repeat="lable in Grp.Label">
<td style="width:30%" class="no-wrap text-left col-xs-text-center text-primary">
<h4>{{lable.LabelName}}</h4>
</td>
<td style="width:60%" class="no-wrap text-left">
<input type="{{input_type[lable.InputType]}}"
name="{{lable.LabelID}}" ng-model="Field[lable.LabelID]"
ng-init="Field[lable.LabelID] = Field[lable.LabelID] || {}"/>
</td>
</tr>
</table>
and my controller is like
productApp.controller('saveOrder',function($scope,$http)
{
$scope.FieldOptions = {};
$scope.createOrder = function()
{
alert("in");
console.log($scope);
console.log($scope.Field[1]);
console.log($scope.FieldOptions);
}
});
My Server Data will come like
{
"GroupName": "Order Form",
"Label": [
{
"InputType": "1",
"LabelID": "1",
"LabelName": "BillingDetails"
},
{
"InputType": "1",
"LabelID": "2",
"LabelName": "shipping Details"
}
]
}
For that scenario am getting error like
TypeError: Cannot set property '1' of undefined
at Function.v.assign (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:73:162)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:72:33
at Object.e.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:88:347)
at pre (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:145:309)
at i (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:43:396)
at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:307)
at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:324)
at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:324)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:38:372
at Object.<anonymous> (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:148:122) <input type="{{input_type[lable.InputType]}}" name="{{lable.LabelID}}" ng-model="Field[lable.LabelID]" ng-init="Field[lable.LabelID] = Field[lable.LabelID] || {}" class="ng-pristine ng-valid">
these type of questions i found lot in so. but i am unable to figuring out solution for my scenario. please help me with this issue...
any type of help is appreciable.
Try setting $scope.Field = []; inside the controller and removing the ng-init directive. In you current code, when compilation occurs $scope.Field is getting undefined.
I have the following fictional object which I'm trying to filter:
{
"0":{
"boy":{
"age":"32",
"name":"Daniel Grey"
}
},
"1":{
"boy":{
"age":"23",
"name":"John Doe"
}
}
}
And then, the ng-repeat directive looks like this:
<ul>
<li ng-repeat="person in people">{{person.boy.name}}<li>
</ul>
My question is, how do I filter people by "name"? I've tried:
<input type="text" ng-model="name">
<ul>
<li ng-repeat="person in people | filter:name">{{person.boy.name}}<li>
</ul>
... but nothing happens [ ng-model seems disconnected from the view! ].
Any response is much appreciated!
Thank you!
Updated answer as per OP's updates
Looking at your fiddle, your $scope.people is essentially an array with one big JSON object, with multiple nested boy objects. This is hard to work with. If you have control over the construction of the JSON object, I will suggest converting into an array of multiple JSON objects, which may look something like:
$scope.people = [
{
"name":"Daniel Grey",
"age":"32",
"gender": "male"
},
{
"name":"John Doe",
"age":"23",
"gender": "male"
}
];
Notice how I converted the boy key into the gender attribute.
If you really have absolutely no control over the data structure, you may have to come up with a custom filter to parse through the nested structure.
Take a look at this fiddle. A few things to pay attention to:
I have to specify people[0] in ng-repeat to retrieve the one big JSON object in your array.
The custom nameFilter searches the .boy.name attribute only.
Original Answer
If you want your filter by just name, you will have to specify the specific attributes in your ng-model directive. So in your case, it will be
<input type="text" ng-model="search.boy.name">
<ul>
<li ng-repeat="person in people | filter:search">{{person.boy.name}}<li>
</ul>
But first you will need to fix your JSON object.
UPDATE:
Live demo on fiddle. I did notice that the search-by-name-only filter doesn't work with angularjs 1.2.1, but works with angularjs 1.2.2.
I am new to angular js so please forgive me for this basic question.
I have an array of object literals and I want to add filter in angular js according to particular field type.
Array of object literals:
var todos= [{text: 'To-DO1', done: false,group:'Group1' }, {text: 'To-do2', done: false, group:'Group2' } ];
I am using this code:
<select data-ng-model="selectOption" data-ng-options="item as item.gtype for item in items"> </select>
<li data-ng-repeat="todo in todos track by $index | filter: selectOption.gtype ">
Above filter is not working
For populating the select I am using :
$scope.items = [
{gtype:'Group1'},
{gtype:'Group2'},`enter code here`
{gtype:'Group3'},
{gtype:'Group4'},
{gtype:'Group5'}
];
Could someone please help me through ?
The problem is with the track by $index. The correct place for it is at the end of the expression, after the filter (see ngRepeat documentation)...
<li data-ng-repeat="todo in todos | filter: selectOption.gtype track by $index">
Live Demo
Edit: As requested, here's an updated fiddle to show an alternate message if filter produces nothing...
Live Demo
According to the documentation and other SO questions, I should be able to output a set of key/value pairs with ng-repeat
$scope.getFilters = function(){
return {
film : true,
game : true,
music : true,
sport : true,
tv : true
}
}
$scope.filters = $scope.getFilters();
Then this is my HTML
{{filters}}
<div
ng-repeat="(name,set) in filters"
>
{{name}} : {{set}}
</div>
But this is all I get from that:
{"film":true,"game":true,"music":true,"sport":true,"tv":true}
<!-- ngRepeat: (name,set) in filters -->
I've tried JS fiddles, it works. This is only a snippet of my code, there is more on the page but I can't paste it all here.
UPDATE: Just noticed this error:
Error: Duplicates in a repeater are not allowed. Repeater: (name,set) in filters key: boolean:true
This should work:
<div ng-repeat="row in [1,1,1] track by $index">
Check out this question for more details...Angular ng-repeat Error "Duplicates in a repeater are not allowed."
Hope this helps!