I have the following JSON (test JSON as how it comes from the server):
$scope.allCategoriesAndSubcategories = {
"category" : {
"categoryname" : "pasteleria",
"subcategory" : [
{"subcategoryname" : "pastel tradicional", "subcategoryid" : "1"},
{"subcategoryname" : "pastel con fondant", "subcategoryid" : "2"}
]
},
"category" : {
"categoryname" : "eventos",
"subcategory" : [
{"subcategoryname" : "boda", "subcategoryid" : "1"},
{"subcategoryname" : "cumpleanos", "subcategoryid" : "2"}
]
}
};
Then on the select in the HTML I do the following:
<div input-field>
<select material-select
ng-model="picture.category1" required>
<optgroup ng-repeat="category in allCategoriesAndSubcategories" label="{{category.categoryname}}">
<option value="{{category.subcategory.subcategoryid}}">{{category.subcategory.subcategoryname}}</option>
</optgroup>
</select>
<label>CategorÃa #2</label>
</div>
When I console.log() I get the actual object so it's not undefined, however the select is not populating. Should I do something else to populate it? I'm new to angularJS and I can't find an example similar to this one
The HTML is invalid if you wish to create list of options
<div input-field>
<select material-select ng-model="picture.category1" required>
<optgroup ng-repeat="category in allCategoriesAndSubcategories" label="{{category.categoryname}}">
<option ng-repeat="subcategory in category.subcategory" value="{{subcategory.subcategoryid}}">{{subcategory.subcategoryname}}</option>
</optgroup>
</select>
<label>CategorÃa #2</label>
</div>
then after you select element the model picture.category1 should be populated
working plunker http://codepen.io/maurycyg/pen/PZpRRy
also your data should be formatted differently
$scope.allCategoriesAndSubcategories = [{
"categoryname": "pasteleria",
"subcategory": [{
"subcategoryname": "pastel tradicional",
"subcategoryid": "1"
}, {
"subcategoryname": "pastel con fondant",
"subcategoryid": "2"
}]
}, {
"categoryname": "eventos",
"subcategory": [{
"subcategoryname": "boda",
"subcategoryid": "1"
}, {
"subcategoryname": "cumpleanos",
"subcategoryid": "2"
}]
}];
});
I think that proble is here
<option value="{{category.subcategory.subcategoryid}}">
Subcategory is array, and i think that you should use new ng-repeat to make list of <option> tags
Related
I have the following select option :
<select ng-model="class_name" name="class_name" class="form-control">
<option ng-repeat="t in MemberClass" value="{{t}}">{{t.class_name}}</option>
</select>
I want to set default option MemberClass[0] to select option. I tried the following code but not working.
The JSON data is coming from Webservice...
//To fetch Member Class
$http.get('http://192.168.1.6:8080/apartment//member/class/list').then(function(response) {
$scope.MemberClass = response.data.list;
$scope.class_name = $scope.MemberClass[0]; // Not working
});
Member class JSON data is :
[
{
"class_id": 1,
"class_name": "Owner",
"class_details": "DCE"
},
{
"class_id": 7,
"class_name": "Staff "
},
{
"class_id": 10
"class_name": "Vendor"
}
]
Plunker sample : https://plnkr.co/edit/vVcrmOREkcVBBM2Ynhgv?p=preview
(Am getting error if I not select any option...)
You can utilize ng-options for this. It is the preferred way most of the times. Like this:
<select ng-model="class_name" ng-options="t as t.class_name for t in MemberClass">
</select>
Now, since you have $scope.class_name assigned as default value, it will be selected already.
working example
Use ng-init. Try like below.
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="Ctrl">
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div class="form-group">
<label class="control-label col-md-3">Member Class </label>
<div class="col-md-4">
<select ng-model="class_name"
ng-init=" class_name = MemberClass[0]" name="class_name" ng-options="t as t.sub_class_name for t in MemberClass">
</select>
<p>Selected Value: {{class_name}} <p>
</div>
</div>
<button type="submit" ng-click="alertdata()">Save</button>
<script>
angular.module('myApp', [])
.controller('Ctrl', function($scope) {
var MemberClass;
$scope.MemberClass = [{
"sub_class_id": 1,
"sub_class_name": "Primary"
},
{
"sub_class_id": 2,
"sub_class_name": "Secondary "
},
{
"sub_class_id": 3,
"sub_class_name": "Dependent "
},
{
"sub_class_id": 4,
"sub_class_name": "Sub Member"
},
{
"sub_class_id": 5,
"sub_class_name": "None"
}
]
// $scope.class_name = $scope.MemberClass[0];
$scope.alertdata = function() {
$scope.class_name = "{}";
var parameter;
parameter = {
"member": {
"first_name": "first_name",
"role": [{
"role_id": 4
}],
"associated": "associated",
"class0": [JSON.parse($scope.class_name)],
"contect": [{
"intercom": "intercom"
}],
"individualdetails": [{
"gender": "gender"
}]
},
"address": [{
"street_address_1": "street_address_1"
}]
}
console.log(JSON.stringify(parameter));
};
});
</script>
</body>
</html>
You should definitly use ng-options for this
<select ng-model="class_name" ng-options="t as t.class_name for t in MemberClass">
</select>
To set a default, either set the $scope.class_name to a value of the MemberClass array or you can add an empty option tag as below which will be selected when the $scope.class_name is null
<select ng-model="class_name" ng-options="t as t.class_name for t in MemberClass">
<option value="">Select value</option>
</select>
I have two drop down fields where the second one is dependent on the selection in the first.
The data for the first drop down comes from one data set. It lists the number associated with an account ng-repeat="option in acctList": 1, 4 and 7.
I want to go to a different data set, find the account numbers that match, and then show the Customers that are related to that account. (account 1 has customers 1-2, account 4 has customers 3-4, and account 7 has customers 5-7). The second drop down should show nothing (blank) when nothing has been selected in the first.
Here is my plunker with the two drop downs: http://plnkr.co/edit/jDitkge1rx6GJzkdElJO?p=preview
Here is my controller:
angular.module("app", [])
.controller("MainCtrl", function($scope) {
$scope.test = "This is a test";
$scope.defnum = 1;
$scope.acct_info = [
{
"Req": "MUST",
"DefCom": "1"
},
{
"Req": "NoMUST",
"DefCom": "5"
},
{
"Req": "MUST",
"DefCom": "4"
},
{
"Req": "MUST",
"DefCom": "7"
}
];
$scope.cust_info = [
{
"Customer": "1",
"Com": "1"
},
{
"Customer": "2",
"Com": "1"
},
{
"Customer": "3",
"Com": "4"
},
{
"Customer": "4",
"DefCom": "4"
},
{
"Customer": "5",
"DefCom": "7"
},
{
"Customer": "6",
"DefCom": "7"
},
{
"Customer": "7",
"DefCom": "7"
}
];
});
I added ng-repeat="option in cust_info | filter:{ Com : filter.DefCom }" to try to filter the second based on this SO answer: Filter ng-options from ng-options selection
But it's not working.
I've tried using ng-change, but I think there should be an easier way, like a filter or track by. I'm wondering also if I should change from ng-repeat to ng-option. Anyone have insight on an easy way to do this?
Use ng-if in your second <option> tag, may it is, whatever you want
<select>
<option ng-selected="defnum == option.DefCom" ng-repeat="option in acct_info | filter:{Req:'MUST'}:true">
{{ option.DefCom }}
</option>
</select>
<select>
<option ng-if="option.DefCom" ng-selected="" ng-repeat="option in cust_info">
{{ option.Customer}}
</option>
</select>
So the overview of the problem; I am retrieving data from an api and creating a CRUD page for it. The data has a set of labels that the user can select.
Below is a code sample representing my problem. The labels selected by the user are represented by the user.labels relationship and the total available labels that can be selected are represented by user.parent.grandparent.labels.
I'm able to sync the selection. What I can't seem to figure out is how to get rid of options that have already been selected from the list of options on any other subsequent select field.
angular.module('app', [])
.controller('select', ['$scope', '$filter', '$location',
function($scope, $filter, $location) {
$scope.user = {
"parent": {
"grandparent": {
"labels": [{
"id": 28,
"name": "Label 1",
}, {
"id": 17,
"name": "Label 2",
}, {
"id": 39,
"name": "Label 3",
}, {
"id": 77,
"name": "Label 4"
}, {
"id": 100,
"name": "Label 5"
}]
}
},
"labels": [{
"id": 28,
"name": "Label 1",
"meta": {
"score": 3
}
}, {
"id": 17,
"name": "Label 2",
"meta": {
"score": 5
}
}]
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="select">
<div ng-repeat="label in user.labels track by $index">
<div class="form-field">
<span>Label</span>
<select ng-model="user.labels[$index]" ng-options="department.name for department
in user.parent.grandparent.labels track by department.id">
</select>
</div>
<div>
<span>Score</span>
<select ng-model="label.meta.score">
<option value="1">1 (lowest)</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5 (highest)</option>
</select>
</div>
</div>
<button ng-click="user.labels.push({})">Add Label</button>
</div>
You can use a filter function inside the ng-repeat to achieve this, here is a sample Codepen showing you how:
http://codepen.io/anon/pen/ZYveOo
You need to pass the filter in the repeat definition:
<select ng-model="user.labels[$index]" ng-options="department.name for department in user.parent.grandparent.labels | filter:removeSelected track by department.id ">
Which refers to this function on scope:
$scope.removeSelected = function(val){
return !_.find($scope.user.labels, function(label) {
return label.id === val.id;
});
};
Even then though I think you are missing one use case which is that you want to be able to have the currently selected label included in the options, by removing all selected options you are removing that ability.
Updated:
Ok then, so after giving this some thought I have come up with the following filter which could be optimised but does seem to work as expected:
.filter('duplicatesFilter', function() {
return function(items, index, selected) {
var res = [selected[index]];
_.forEach(items, function(item){
if(!_.find(selected, function(label) {
return label.id === item.id;
})){
res.push(item);
}
});
return res;
};
})
Use it like so:
<select ng-model="user.labels[$index]" ng-options="department.name for department in user.parent.grandparent.labels | duplicatesFilter:$index:user.labels track by department.id "></select>
This is something I have hit a few times and each time I've worked around it. I'll take a look later if I can find a custom filter that better solves the problem and if I can't I'll tidy up this code and release one; however this should be good to go for your use-case.
Working code-pen:
http://codepen.io/anon/pen/ZYveOo
I get an json oject from a service, and I use some of it's fields to populate my select option list.
When I try to print the selected value in my controller, output response is "undefined".
Where am I wrong?
JSON
[ {
"Accreditment" : {
"Id" : "1",
"Creator" : "John Smith",
"IdCreator" : "1",
"CreationDate" : "2014-07-01T18:13:51+02:00",
"CostCenter" : [ "5411-Channel1", "5412-Channel2" ],
"Destination" : [ "Playout Channel1", "Playout Channel2" ],
"IdUserEnabled" : [ "1", "2" ],
"WorkOrderType" : [ "New Asset", "Subtitling" ],
"StartDate" : "2013-05-04T18:13:51+02:00",
"EndDate" : "2014-10-04T18:13:51+02:00",
"Status" : "enabled"
}
} ]
HTML
<select class="form-control" ng-model="myOption" ng-change="selectAction()">
<option ng-repeat="cost in work.Accreditment.CostCenter" value="{{cost}}">{{cost}}</option>
</select>
CONTROLLER
mwm3.controller('CreateWorkOrderCtrl',function($scope){
$scope.selectAction=function(){
console.log($scope.myOption);
};
});
The issue is with your JSON.
Just remove the array of the JSON. It will work Fine.
Read more about JSON
JSON is an object not an array!
correction:
$scope.work = {
"Accreditment" : {
"Id" : "1",
"Creator" : "John Smith",
"IdCreator" : "1",
"CreationDate" : "2014-07-01T18:13:51+02:00",
"CostCenter" : [ "5411-Channel1", "5412-Channel2" ],
"Destination" : [ "Playout Channel1", "Playout Channel2" ],
"IdUserEnabled" : [ "1", "2" ],
"WorkOrderType" : [ "New Asset", "Subtitling" ],
"StartDate" : "2013-05-04T18:13:51+02:00",
"EndDate" : "2014-10-04T18:13:51+02:00",
"Status" : "enabled"
}
}
I have added ng-selected. Try this out.
<select class="form-control" ng-model="myOption" ng-change="selectAction()">
<option ng-repeat="cost in work.Accreditment.CostCenter" value="{{cost}}"
ng-selected="cost==myOption">
{{cost}}
</option>
</select>
Hope this helps.....
As I see from your tags, you're using angularjs. Angular has its own directive for the select tag. It goes something like this:
<select ng-model="myCost" ng-options="cost in work.Accreditment.CostCenter">
<option value="">-- choose cost --</option>
</select>
And, yes, remove the array brackets from your json. You're traversing an object in this case. No need for an array.
Why don't you just do it like this?
<select ng-model="selectedItem" ng-options="item as item.Accreditment.Creator for item in list"></select>
I have this array in $scope.types (example data) :
[
{
"id": 1,
"description": "Cat",
"property_type": [
{
"id": 1,
"description": "Nickname",
},
{
"id": 2,
"description": "Age",
},
{
"id": 3,
"description": "Color",
}
]
}
]
I want to populate a ng-repeat with the properties of the type. Here's what I did :
<div ng-repeat="property in types[parseInt($('#select_type').val())].property_type">
{{property.description}}
</div>
This code doesn't show anything. However, if I replace $('#select_type').val() with 0, which is the offset of the object in the array, it works. What I don't understand is that if I look in the console what's the value of $('#select_type').val(), I get "0"... so it should work, unless there's something I don't get right with Angular (which is probably the case here).
If it can help, here's my select :
<select ng-options="type.id as type.description for type in types" ng-model="current_data.object_type_id" id="select_type">
<!-- Generated by ng-options, not hardcoded -->
<option value="0" selected="selected">Cat</option>
<option value="1">Dog</option>
</select>
Have any idea?
Try to use the following code:
<div ng-repeat="property in current_data.property_type">
{{property.description}}
</div>
<select ng-options="type.description for type in types" ng-model="current_data" id="select_type">
<option value="">select</option>
</select>
Try this on your ng-repeat
<div ng-repeat="property in types[current_data.object_type_id].property_type">
{{property_type.description}}
</div>