I have a JSON text and three dropdown lists.
First dropdown list will be populating Entities (Applicant, Person, Plan).
Second dropdown list will be populating Association Types of selected Entity from previous selection.
(Here ‘Person’ and ‘Plan’ will be rendered by selecting “Applicant” as Entity)
The third dropdown list should populate the Attribute values. (Based on selection of Association Type from the second dropdown list, it should display the attributes of respective Entity)
Example: If I select Person Association type in 2nd dropdown list then Attributes of Person Entity has to be displayed.
I have tried solving this problem.
I could get the values for the first two dropdown lists. I have tried rendering the values however I am facing some problems.
Can someone help me how to get the values??
http://jsbin.com/toqisibumo/edit?html,js,output
If you dont understand question, Please dont hesitate to ask. Thanks
Hope this solve your issue.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<select ng-model="dd1" ng-options="item.Entity for item in data">
</select>
<select ng-model="dd2" ng-options="ass.associationType for ass in dd1.Associations" ng-change="loadDD3()">
</select>
<select ng-model="dd3" ng-options="atr.name for atr in dataDD3">
</select>
</body>
<script>
var angular = angular.module('myApp', []);
angular.controller('myCtrl', function($scope,$http) {
$scope.data = [
{
"Attributes":[
{"name":"CSRPercent","attributeType":"decimal"},
{"name":"date","attributeType":"date"},
{"name":"hoursPerWeek","attributeType":"long"},
{"name":"householdSize","attributeType":"long"},
{"name":"income","attributeType":"decimal"},
{"name":"incomePeriod","attributeType":"string"},
{"name":"isEligibleForCostSharingReduction","attributeType":"boolean"},
{"name":"isEligibleForIncomeBasedMedi_CAL","attributeType":"boolean"},
{"name":"isEligibleForMedi_Cal_Access","attributeType":"boolean"},
{"name":"isEligibleForPremiumAssistance","attributeType":"boolean"},
{"name":"state","attributeType":"string"},
{"name":"zip","attributeType":"string"}
],
"Associations":[
{"associationType":"Person","name":"familyMembers"},
{"associationType":"Plan","name":"plans"}
],
"Entity":"Applicant"
},
{
"Attributes":[
{"name":"age","attributeType":"long"},
{"name":"isPregnant","attributeType":"boolean"}
],
"Entity":"Person"
},
{
"Attributes":[
{"name":"company","attributeType":"string"},
{"name":"costPerPerson","attributeType":"decimal"},
{"name":"name","attributeType":"string"},
{"name":"premiumAssistance","attributeType":"decimal"},
{"name":"stars","attributeType":"long"},
{"name":"totalMonthlyPremium","attributeType":"decimal"},
{"name":"yourMonthlyPremium","attributeType":"decimal"}
],
"Entity":"Plan"
}
];
$scope.dataDD2 = [];
$scope.loadDD3=function(){
for(var i = 0; i < $scope.data.length; i++) {
var obj = $scope.data[i];
if(obj.Entity == $scope.dd2.associationType)
{
$scope.dataDD3 = obj.Attributes;
}
}
};
});
</script>
</html>
But still I have some issues.
For the dropdown1 you have three values(Applicant, Person, Plan).
If you select Applicant you will load Associations(Person, Plan) to the dropdown2.
What if you select either Person or Plan in dropdown1 ?
For those two you don't have associations ryt.
First of all, we can't test your jsbin, because the get request fails (ERR_NAME_NOT_RESOLVED)
Secondly, I see this line of code:
<select ng-model="z" ng-change="addAttributes()" ng-options="sel.name for sel in z.Attributes">
You've set the ng-model to 'z', and then try to get the options from 'z.Attribute', but your 'z' model is not populated with anything. Maybe you wanted to make y.Attributes ?
UPDATE:
I think you are having troubles with your JSON data.
here's an updated link.
Select Applicant -> Person -> FamilyMembers
is this the behaviour you want?
If so, look how I've modified your select:
<select ng-model="z" ng-change="addAttributes()" ng-options="color.name for color in y.names">
and this is how I've modified your JSON data:
...
"Associations":[{"associationType":"Person","names":[{"name" : "familyMembers"}]}
...
so names is an array containing your values.
I checked your codes.
In the third drop-down your loading the data from
sel.name for sel in z.Attributes
Where it has to be
sel.name for sel in x.Attributes
Then you will get the dropdown
Related
I've been having an issue for a day or two trying to get a select element working with my angular model.
I have a driving log, and one of the fields is truck. The value should be the truck id, which is received and sent from/to an API.
I've tried a couple methods, using ng-repeat to generate options, as well as using ng-options. The problem I ran into with the ng-repeat method was that I wasn't able to set the selected item, even with a lot of tinkering and doing things that shouldn't have to be done, and bad practice.
The second method I believe is the correct one, and it's using ng-options.
<select ng-model="timeLog.truck" convert-to-number
ng-options="truck.description for truck in trucks track by truck.id">
<option value="">Choose Truck</option>
</select>
.controller('EditTimeLogCtrl', function($scope, $stateParams, $location, timeLog, LogEntry, localStorageService) {
// edit an individual time log
$scope.timeLog = timeLog;
$scope.trucks = localStorageService.get('trucks');
$scope.saveTimeLog = function() {
LogEntry.update($scope.timeLog, function(data) {
$location.path('/tab/logs/edit');
});
}
})
Everything else in my timeLog model works, and the value in the model is an integer.
For some reason, I can't get the initial value to set correctly even though the docs specify to use this to set a default value.
The other issue I have when using ng-options is that when I submit the form, it uses the truck object {"description": "big red", "id": 7, ... } instead of the value of the option, which would just be 7. The API is expecting the id, so that does not work.
I've found 3 stackoverflow articles about that, and they all give various answers which don't really solve the problem.
This seems like a very common use case, maybe I'm thinking about it the wrong way? I just have a model which has a dropdown/select field and I need that to populate to what the selected value is if the model already exists (i.e. edit form), and pass the id value in the model save.
Your ngOptions syntax is a bit off - it's value as text for obj in arr - so change yours to:
ng-options="truck.id as truck.description for truck in trucks track by truck.id"
And then set your model to the id of the object you want selected:
$scope.timeLog.truck = 7; //truck id 7 selected.
If you want the whole object as the value:
ng-options="truck as truck.description for truck in trucks track by truck.id"
And set the whole object:
$scope.timeLog.truck = $scope.trucks[0];
Make sure your timeLog.truck IS (===) the actual object in the trucks array (same referenced object)
angular
.module('app', [])
.controller('myController', myController);
function myController($scope) {
$scope.trucks = [{
"description": "big red",
"id": 7
}, {
"description": "big yellow",
"id": 6
}];
$scope.timeLog = {truck: $scope.trucks[0]};
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div ng-app="app">
<div ng-controller="myController">
<select ng-model="timeLog.truck" ng-options="truck.description for truck in trucks">
<option value="">Choose Truck</option>
</select>
</div>
</div>
I have five dropdowns. All five dropdowns have same source for options. An option selected in one dropdown should not appear in options of remaining dropdowns. What is best way to achieve it in angularjs?
And source for ng-options is array of objects.
You'll need to come up with an implementation that suits your specific needs and desired user experience, but this may help you work out some basic principles you can use. This is just the most minimal example I could think of. The main point is the custom filter that you'll filter ng-options down with. It will receive your array of objects (the options), and you'll also pass in the other models so that you can filter them out if they're selected.
Here, I'm looping over each selected object and removing it from the ng-options array, unless it's the object selected on this element.
angular.module('myApp', [])
.filter('customFilter', function(filterFilter) {
return function(input, filterEach, exclude) {
filterEach.forEach(function(item) {
if (angular.equals(item, exclude)) { return; }
input = filterFilter(input, '!'+item);
});
return input;
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.4.0/lodash.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<div ng-app="myApp" ng-init="foos = [{label:'label 1',id:1},{label:'label 2',id:2},{label:'label 3',id:3}]; selected = []">
<div ng-repeat="foo in foos">
<select ng-model="selected[$index]" ng-options="obj.id as obj.label for obj in foos | customFilter:selected:selected[$index]"></select>
</div>
</div>
I have this pseudo code angularjs app. You can select a hobby for each person, save it and load it again.
However when I load the data, the select boxes dont have the correct option selected. person.hobby exists and is the correct object, but it looks like ng-model isn't set correctly.
Am I missing something?
<div ng-repeat="person in people">
<p>{{ person.fullname }}</p>
<select ng-model="person.hobby"
ng-options="h.hobby_name group by h.category for h in hobbies">
</select>
</div>
<script>
//... controller...
$http.get('/gethobbies/').succes(data) {
hobbies = data;
};
$http.get('/getpeople/').succes(data) {
people = data;
// looks like this: [{'fullname': 'bill gates', 'hobby': {'hobby_name': 'programming', 'category': 'computers'}, ...]
};
</script>
ng-model needs to be set to the exact same object as the one in the ng-options array that you want to be selected. Angular uses object references to figure out which one should be active so having a "hobby-object" with the same "hobby_name" as one of the objects in "hobbies" is not enough. It needs to be a reference to the same object.
See documentation for select for details
I have two drop downs. Initially both has values like "First","Second","Third",...
When 1st dropdown has value "First" the second should not offer a value "First" that is second should have other than what is selected from 1st one. I want to do this using angularjs. Values in 2nd dropdown should be changed dynamically.
<select class="form-control" ng-model="Data.firstType">
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
<select class="form-control" ng-model="Data.SecondType">
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
Can anyone help on this?
Thanks in advance.
If you're items in the drop downs are static you can do this fiddle
ng-if="Data.FirstType !== First"
If they are dynamic then you can filter the items in the second list based upon the item selected in the first drop down
Here is a fiddle to dynamically filter the second list if the lists are being populated dynamically.
function MyCtrl($scope){
$scope.Data = {};
$scope.items = [{id:1, name:'First'}, {id:2, name:'Second'}, {id:3, name:'Third'}];
$scope.exclude = function(x){
return x !== $scope.Data.firstType;
}
}
Just use a $watch:
$scope.$watch('Data.firstType', function(val) {
//Get index of type in Data.yourArrayData
var idx = $scope.Data.yourArrayData.indexOf(val);
$scope.Data.yourArrayData.splice(idx, 1);
});
This assumes you are binding your second select to yourArrayData using an ng-repeat. I haven't tested this code, but it should be what you need.
I am working with AngularJS and I am so new in that.
My aim is fill a tag SELECT with OPTION element from a datasource.
That is what I do basically:
<script>
function LocalizationController($scope, $http) {
$scope.Regions = [
{ ID: "001", DESC: "DESC_1" },
{ ID: "002", DESC: "DESC_2" },
{ ID: "003", DESC: "DESC_3" },
{ ID: "004", DESC: "DESC_4" },
];
$scope.Region = "003";
$scope.init = function () {
$scope.Region = "003";
}
}
</script>
<div ng-controller="LocalizationController" ng-init="init();">
<input type="button" ng-click="Region='002'" value="test">
<select id="region" name="RegionCode" ng-model="Region">
<option ng-repeat="item in Regions" value="{{item.ID}}">{{item.DESC}}</option>
</select>
</div>
Everything works good, the Select is fill of my items,
but I would like to set default value.
How you can see
- I set my object model which is ng-model="Region"
- I set its default value into init() function by $scope.Region = "003";
when the SELECT is loaded I do not why but dafault value is the first one "001"
I also tried to change value manually by
in that case the SELECT gets the right value selection.
Anyone can explain why it does not work?
I know that is a common problem, I am already looked for that,
any solution suggestion to use NG-OPTION, that directive works good,
it can fill my SELECT with my array of object, it can select default value,
very nice but it does not solve my problem because the value into the
the option element id an integer autoincrement which is not what I want.
so in summary:
NG-REPEAT can render the SELECT how I want but default value does not work
NG-OPTIONS can render the SELECT how I want, default value works but the value into option
item cannot be set how I want.
any suggestions?
thanks in advance
EDIT
I found a "solution"
<div ng-controller="LocalizationController" EXCLUDE-ng-init="init();">
<select id="region" onload="alert();angular.element(this).scope().Region='002'" name="RegionCode" ng-model="Region">
<option ng-repeat="item in Regions" value="{{item.ID}}">{{item.DESC}}</option>
{{init();}}
</select>
</div>
I do not like so much but works pretty good:
- ng-init="init();" does not work good
- If we exclude the initialize of default value into ng-init so EXCLUDE-ng-init="init();" and put the initilize when option are loded it works
Have a look at the code blow, I put {{init();}} after ng-repeat. Everithing works good
{{item.DESC}}
{{init();}}
I do not think is the best solution but Works,
1) I have a droopdown fill of my elements
2) The value of option into my list is CORRECT, "001", "002" and not a stupid autoincremental value which is useless.
I hope that can help someone...
THANKS TO EVERYONE TRIED TO HELP ME
Just use ng-options
<select id="region" name="RegionCode" ng-model="Region" ng-options="option.ID as option.DESC for option in Regions">
And do
$scope.init = function () {
$scope.Region = $scope.Regions[2];
}
When you inspect the select box while using ng-options the values for the options will be like 0,1,2,3.., that is auto increment integer as you said. But don't worry about that. Its the value just for showing up there, but once you post your form you will get the right value as you possess, in your case ID.
use ng-options
and in this case if you play with object (not single values) it should be so
$scope.init = function () {
$scope.Region = $scope.Regions[2];
}