I am new in AngularJS and trying to show data in drop down list and facing few errors.
Here is my JSON data:
$scope.list=[
{
"$id": "1",
"Groups": [
"xyz",
"abc",
"ugh",
"ccd"
]
}
]
I am trying to show list of names of Groups mentioned in the json.
In controller :-
$scope.selectedval = $scope.list[0].Groups;
console.log($scope.selectedval);
In View I am doing this :-
ng-options="item.Groups for item in list"
By doing this I am getting all the datas in single option. How to separate datas on each list by ng-option ?
`ng-options="item for item in list[0].Groups"
In view try this
ng-options="val for val in selectedval"
$scope.list:[{"$id": "1",
"Groups": [
"xyz",
"abc",
"ugh",
"ccd"
]}]
$scope.list=[] // replace ":" by "="
Related
i get columnNames dynamically with object inside of an property,i just want to show only that property which is inside of that object.
this is my columnNames
$scope.columnNames=[
{"field":"firstName"},
{"field":"lastName"},
{"field":"id"},//i can get "id" or "name" or anything it comes dynamically
{"field":"employed"}
];
and i get the data like this
$scope.gridOptions.data = [
{
"firstName": "Cox",
"lastName": "Carney",
"id": "{'id':'1','name':'Syed'}",
"employed": true
},
{
"firstName": "Lorraine",
"lastName": "Wise",
"id": "{'id':'2','name':'Rasheed'}",
"employed": false
},
{
"firstName": "Nancy",
"lastName": "Waters",
"id": "{'id':'3','name':'Emir'}",
"employed": false
}
];
when i run this am getting the whole object "{'id':'3','name':'Emir'}" in id column but i want only that id property value to show in that column.
and this is my plunker http://plnkr.co/edit/AMeTxuMMBmfVt9f0t7HZ?p=preview
See this plnkr
added the following code to parse the id from json to id field
angular.forEach($scope.gridOptions.data, function(value, key) {
var parsedId = angular.fromJson(value.id.replace(/'/g, '"'));
value.id = parsedId.id;
});
also, seems like your json is ' delemited instead of ", so I had to replace the string so JSON could be parsed but if you are getting proper JSON form server you don't need to do that.
Hope this helps
Try using cellTemplate in $scope.columnNames.
Just add cellTemplate: '<span>{{COL_FIELD[col.field] to $scope.columnNames like this:
$scope.columnNames=[
{"field":"firstName"},
{"field":"lastName"},
{"field":"id", cellTemplate: '<span>{{COL_FIELD[col.field]}}</span>'}, //this cellTemplate works for "id" or "name" or anything
{"field":"employed"}
];
Since you get $scope.columnNames dynamically, you can add cellTemplate like this:
$scope.columnNames[2].cellTemplate='<span>{{COL_FIELD[col.field]}}</span>';
See this plnkr
I have the following JSON file to read and I want to only display some particular keys I want from the JSON.
[
{
"recommendation_id": "cuhwbchuwbcuhw-ccnahcbhb-12",
"title": "hellow world",
"content": "Hello angular",
"name": "John",
"home": "USA"
},
{
"recommendation_id": "cuhwcacabchuwbw-ccnahcbhb-32",
"title": "ng-show",
"content": "ng-show is amazing",
"name": "Google",
"home": "USA"
},
......
{
"recommendation_id": "guwqiwu212wbcuhw-ccnahcbhb-12",
"title": "Awesome",
"content": "Hello Awesome",
"name": "Mike",
"home": "Canada"
}
]
Here is what I use to access the header for my table using Jade.
table(id="allRecommendations")
thead
tr
th(ng-repeat='(key, value) in recommendationsAll[1]') {{key}}
And the output is
recommendation_id title content name home
But I only want the first three items, which should display like the following:
recommendation_id title content
So, what do I miss on my filter? I am interested in getting the object properties not my property details. How do I filter to show particular JSON properties?
This will solve the problem.
table(id="allRecommendations")
thead
tr
th(ng-repeat="(key, value) in recommendationsAll[1]", ng-show="key == 'recommendation_id' || key == 'title' || key == 'content' " ) {{key}}
I have a simple json view like this
{
"articles": [
{
"id": 1,
"title": "Article one",
},
{
"id": 2,
"title": "Article two",
}
]
}
This results are paginated, and i'd like to append the pageCount to the results, something like this.
{
"articles": [
{
"id": 1,
"title": "Article one",
},
{
"id": 2,
"title": "Article two",
}
],
"pageCount": 5
}
How can i achieve this? i can't append it directly because it's a resultset object.
Should i be doing this in the view/controller/model?
thanks a lot!
The _serialize key
Given that you are using the JsonView and auto-serialization
Cookbook > Views > JSON and XML Views > Using Data Views with the Serialize Key
you can simply add another variable for the view, and mark it for serialization, like
$this->set('articles', $this->paginate());
$this->set('pageCount', $this->request->params['paging'][$this->Articles->alias()]['pageCount']);
$this->set('_serialize', ['articles', 'pageCount']);
Using view templates
If you're not using auto-serialization, but custom view templates
Cookbook > Views > JSON and XML Views > Using a Data View with Template Files
you can make use of the PaginatorHelper in your template and add the data when converting to JSON, like
$pageCount = $this->Paginator->param('pageCount');
echo json_encode(compact('articles', 'pageCount'));
Iam trying to generate a multiple select-element with ng-options and want to preselect some items. I get the preselected items from a database as an array of objects. That is my HTML markup to build the selectable:
<select ng-model="currentAppointment.services" ng-options="value.id as value.name group by value.group for value in servicegroups"></select>
The currentAppointment.services variable hold the current selected objects. In servicegroups they are all selectable items, which i get from a REST service. The JSON for the servicegroups look like:
[
{
"id": 0,
"name": "Test1"
"price": 20.0
},
{
"id": 1,
"name": "Test2"
}
]
And the currentAppointment JSON:
{
"_id": "1001",
"title" : "test",
"services": [
{
"id": 0,
"name": "Test1"
"price": 20.0
}
]
}
The select-element is created correctly. But the service object with the id 0 is not preselected. I can image that the problem is, that angular compare an normal object against an angularjs Resource-object and so the objects are not equal. Instead the objects should be compared by the id. But how can i achieve that without coding a own directive?
If you want to pre-populate the dropdown list by assigning it with an object, then you need to remove value.id from the comprehension expression.
<select ng-model="currentAppointment.services" ng-options="value.name group by value.group for value in servicegroups"></select>
then do
$scope.currentAppointment.services = $scope.servicegroups[0];
Working Demo
My JSON looks as follows:
{
"records": [
{
"_id": "5106f97bdcb713b818d7f1f1",
"cn": "lsacco",
"favorites": [
{
"fullName": "Friend One",
"uid": "friend1"
},
{
"fullName": "Friend Two",
"uid": "friend2"
}
]
}
]
}
When I try to use records.favorites as the root for my JSON reader, I do not get any results populated to my model. Is there a way to do this without having to resort to using an association? Note that in my case, records will only have one element despite it showing an array.
records.favorites isn't valid because the property doesn't exist.
You want:
records[0].favorites
records has been declared as an array so records.favorites will point to nothing in the json data file.
using the index in records should solve the problem.