Here is the Scenario
I am getting Data from server in this form
$scope.data=[
{"name":"xyz","status":"pending"},
{"name":"abc","status":"completed"},
{"name":"pqr","status":"completed"}
]
This Data is Seprate GET call for different status
$scope.statusValues=[
{"statusName":"pending","id":"1"},
{"statusName":"completed","id":"2"},
{"statusName":"cancelled","id":"3"},
{"statusName":"custom","id":"4"}
]
In HTML:-
<div ng-repeat="t in data">{{t.name}}</div>
How to Display t.status value inside Select method with more $scope.statusValues
Use key value pair for combine them.
I have created plunker it may helpful.
Plunker
You can use ng-options to display all the status and ng-model to bind to your data status
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.data = [{
"name": "ABC",
"statusId": "1",
"status": "completed"
}, {
"name": "XYZ",
"statusId": "2",
"status": "pending"
}, {
"name": "PQR",
"statusId": "3",
"status": "assigned"
}];
$scope.statusValues = [{
"statusId": "1",
"status": "completed"
}, {
"statusId": "2",
"status": "pending"
}, {
"statusId": "3",
"status": "assigned"
}, {
"statusId": "4",
"status": "cancelled"
}, {
"statusId": "5",
"status": "customstatus"
}, {
"statusId": "6",
"status": "customstatus2"
}];
});
<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="t in data">
{{t.name}}
<select ng-model="t.status" ng-options="s.status as s.status for s in statusValues"></select>
</div>
</div>
EDIT
Update arrays as discussed in comments
Related
Hello I am trying to use Angularjs and I'm not very good at it. I'm trying to find something from the madeUpCards[] array. using the find() function of javascript.
I am not entirely sure, I think it's not working when I use it with Angularjs.
here is the my Code:
<body ng-app="myApp" ng-controller="myCtrl">
<h3>{{getCardById('14')}}</h3>
</body>
array here:
$scope.madeUpCards = [
{
"id": "23",
"name": "The brain",
"closed": true,
},
{
"id": "2",
"name": "Portal dead",
"closed": true,
},
{
"id": "14",
"name": "Holiday",
"closed": true,
},
{
"id": "13",
"name": "warded",
"closed": true,
},
];
javascript :
const app = /**
* myApp Module
*
* Description
*/
angular.module('myApp', []).controller('myCtrl', ['$scope', function($scope){
$scope.getCardById = function(id) {
this.id = id
let foundCard = $scope.madeUpCards.find(function(card, index){
return card.id == this.id
});
return foundCard.name;
}
}]);
in the console this appears:
angular.js:15536 TypeError: Cannot read property 'find' of undefined
at ChildScope.$scope.getCardById ((index):49)
at fn (eval at compile (angular.js:16387), <anonymous>:4:234)
at expressionInputWatch (angular.js:17398)
at Scope.$digest (angular.js:19095)
at Scope.$apply (angular.js:19463)
at bootstrapApply (angular.js:1945)
at Object.invoke (angular.js:5122)
at doBootstrap (angular.js:1943)
at bootstrap (angular.js:1963)
at angularInit (angular.js:1848)
pleas help me how to fix this, or atleast tell me what's wrong.
Change const madeUpCards to $scope.Cards in your controller, and instead of passing in Cards, just use <h3>{{ getCardById('14') }}</h3>
Then in your controller, use $scope.Cards. i.e.
In the controller:
$scope.Cards = [
{
"id": "23",
"name": "The brain",
"closed": true,
},
{
"id": "2",
"name": "Portal dead",
"closed": true,
},
{
"id": "14",
"name": "Holiday",
"closed": true,
},
{
"id": "13",
"name": "warded",
"closed": true,
},
];
...
$scope.getCardById = function(id) {
let foundCard = $scope.Cards.find(function(card, index){
return card.id == this.id
});
return foundCard.name;
}
In the HTML:
<body ng-app="myApp" ng-controller="myCtrl">
<h3>{{ getCardById('14') }}</h3>
</body>
Now you could still pass in Cards to getCardById, but it's already accessible in your controller so it would be pointless.
AngularJS will only bind elements to the DOM that are defined on the scope.
You created Cards as a local variable in the controller, but not part of the scope. So in the HTML when you pass Cards into a function, its undefined (not part of the scope).
This passes undefined into your controller, and then you attempt to call find on undefined, hence your error.
Cards is undefined, try that
<h3>{{ getCardById([
{
"id": "23",
"name": "The brain",
"closed": true,
},
{
"id": "2",
"name": "Portal dead",
"closed": true,
},
{
"id": "14",
"name": "Holiday",
"closed": true,
},
{
"id": "13",
"name": "warded",
"closed": true,
},
], '14') }}</h3>
<h3>{{ getCardById(Cards, '14') }}</h3>
According to this snippet, the variable Cards should be binded to $scope.
So, define a $scope.Cards at the initial part of the controller as below:
const app = /**
* myApp Module
*
* Description
*/
angular.module('myApp', []).controller('myCtrl', ['$scope', function($scope){
$scope.Cards = [
{
"id": "23",
"name": "The brain",
"closed": true,
},
{
"id": "2",
"name": "Portal dead",
"closed": true,
},
{
"id": "14",
"name": "Holiday",
"closed": true,
},
{
"id": "13",
"name": "warded",
"closed": true,
},
];
$scope.getCardById = function(cards, id) {
this.cards = cards
this.id = id
let foundCard = this.cards.find(function(card, index){
return card.id == this.id
});
return foundCard;
};
}]);
Happy coding.
I am trying to print json responce in via console.log ,below is my json response but i want each element to print one by one like user.id or product.name
{
"user": [{
"id": "1",
"name": "User 1"
}, {
"id": "2",
"name": "User 2"
}],
"user_pictures": false,
"products": [{
"id": "1",
"name": "test abc"
}, {
"id": "2",
"name": "test abc 1"
}],
"purpose": ""
}
I am trying like this:
responseData.map((item)=>{
console.log(item.user.id)
})
but error is show in console
TypeError: responseData.map is not a function
responseData is the response in json when i call my fetch method
You can access id like this input.user[0].id.
Below is working code:
let input = {
"user": [{
"id": "1",
"name": "User 1"
}, {
"id": "2",
"name": "User 2"
}],
"user_pictures": false,
"products": [{
"id": "1",
"name": "test abc"
}, {
"id": "2",
"name": "test abc 1"
}],
"purpose": ""
};
console.log(input.user[0].id);
responseData is an object... you cant map over an object... responseData has 4 properties... users, user_pictures, products, purpose... of which, responseData.users and responseData.products are arrays that can be mapped over. user_pictures is a boolean and purpose is a string.
Its Works like this:
JSON.parse(responseData).user.map((item)=>{
console.log(item.id)
})
Thank guys
I try to show JSON data as optgroup option with multi-select in angularjs but not get success
In Html it shown as:
<select ng-model="industrycatslect" ng-change="industryslected(industrycatslect)" multiple ng-options="skilldata.value as skilldata.value group by skilldata.group for skilldata in skillCategory track by skilldata.id">
<option value="">Select Location</option>
</select>
JSON shown as:
"skillCategory": [
{
"id": "8",
"group": "Technology",
"value": " Software Engineering"
},
{
"id": "17",
"group": "Technology",
"value": "Collaboration and Content Management"
},
{
"id": "22",
"group": "Functions",
"value": "Procurement"
},
{
"id": "23",
"group": "Functions",
"value": "Product"
}
],
Please Help me I think I done some mistake in "ng-options".
Not much changes except removing the track by part
angular.module('test', []).controller('Test', Test);
function Test($scope) {
$scope.skillCategory = [
{
"id": "8",
"group": "Technology",
"value": " Software Engineering"
},
{
"id": "17",
"group": "Technology",
"value": "Collaboration and Content Management"
},
{
"id": "22",
"group": "Functions",
"value": "Procurement"
},
{
"id": "23",
"group": "Functions",
"value": "Product"
}
]
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app='test' ng-controller='Test'>
<select ng-model="industrycatslect" multiple ng-options="skilldata.value as skilldata.value group by skilldata.group for skilldata in skillCategory">
<option value="">Select Location</option>
</select>
<br>
{{industrycatslect}}
</div>
I think that this might help you out. There was an error in how you define your skillCategory JSON data. I hope that this JSFiddle helps out. It's not sorted by ID but it displays the elements as intended:
Answer 1
I am using AngularJS, where i have SubDocuments and my JSON comes like below. I would like to know how do i group my subdocuments(list inside orderfood). my plunker link. the result i am getting now is.
Isnain Meals
Chicken Burger
Chicken Burger
but i would like my result like this
Isnain Meals
Chicken Burger(2)
The JSON data
$scope.lists = [
{
"_id": "56b0c315e179bb0e00a44dbf",
"orderfood": [
{
"_id": "569d865bff1fe20e00f8ba97",
"qty": "1",
"confirm": true,
"price": 154,
"name": "Isnain Meals"
}
],
"content": "9176649143",
"created": "2016-02-02T14:54:13.926Z"
},
{
"_id": "56b06ed25b53250e00ccbd73",
"orderfood": [
{
"_id": "569d84f04834c10e003dff36",
"qty": "1",
"confirm": true,
"price": 125,
"name": "Chicken Burger"
}
],
"content": "6886058585",
"created": "2016-02-02T08:54:42.986Z"
},
{
"_id": "56b06ed25b53250e00ccbd74",
"orderfood": [
{
"_id": "569d84f04834c10e003dff37",
"qty": "1",
"confirm": true,
"price": 125,
"name": "Chicken Burger"
}
],
"content": "6886058585",
"created": "2016-02-02T08:54:42.986Z"
}];
my plunker link
You can use the filter "groupBy"
<div ng-repeat="(key, value) in lists | groupBy: 'name'">
{{key}} ({{value.length}})
</div>
value is the list of grouped data.
see related question:
How can I group data with an Angular filter?
I used lodash to group the subdocuments
$scope.groupedByFoodName = _.chain($scope.lists).map(function(each) {
return each.orderfood
}).flatten().groupBy(function(each) {
return each.name
}).value();
demo
I'm trying to create an angular directive making me able to select from a list of items group by category. Each item should be selectable using a checkbox.
The input data to the directive is something like
[
{
"id": "1",
"name": "category1",
"items": [
{
"id": "1",
"name": "item1"
},
{
"id": "2",
"name": "item2"
},
{
"id": "3",
"name": "item3"
},
{
"id": "4",
"name": "item4"
}
]
},
{
"id": "2",
"name": "category2",
"items": [
{
"id": "5",
"name": "item5"
},
{
"id": "6",
"name": "item6"
}
]
}
]
And the object of pre-checked items is:
{
"1": [
"2",
"4"
]
}
Here item with id 2 and 4 from category with 1 should be pre-checked.
My code results in this view:
The checked-state is handled using the ng-checked directive:
<input id="item-{{item.id}}" value="{{item.id}}" type="checkbox" ng-checked="isSelected(cat,item)">
When checking/unchecking an item, the selected items object should be updated to reflect the current state. How can I handle this? Should all this be structured in a different way?
See my plumber: http://plnkr.co/edit/6fbfZnQCq5fq1zDp8VIB.
As always, there is multiple ways to achieve this. My suggestion:
Use ng-model on your inputs:
<input ng-model="selected[cat.id][item.id]"
id="item-{{item.id}}"
value="{{item.id}}"
type="checkbox"
ng-checked="selected[cat.id][item.id]">
This will require a slight modification of your selectedItems property (it is now an object instead of an array):
$scope.selectedItems = {
"1": {
"2": true,
"4": true
}
};
The ng-checked in the HTML will automatically check the items which are marked true.
I'm not sure how you want to handle the selection of categories, but I hope this will give you an idea!
Check the updated Plunker.