Menu
I am able to populate 2 dropdowns directly from database. My problem is, the 2nd dropdown values has to be populated based on the 1st dropdown selection. Since i am new to Angular, i m not able to figure that out, can someone help me out with this.
<select id="OfficeId" name="OfficeId" ng-model="item.OfficeId"
ng-options="item.OfficeId as item.OfficeName for item in Offices">
<option value="" selected>Select the Office</option>
</select>
<select id="OBJ" name="OBJ" ng-model="item.OfficeOBJId"
ng-options="item.OfficeOBJId as item.OBJId for item in Codes">
<option value="" selected>Select OBJ Code</option>
</select>
myApp.factory('OfficeNames', function ($resource) {
return $resource(
'api/Office/:id',
{ id: '@id' },
{ update: { method: 'PUT' } }
);
});
myApp.factory('OfficeObjCode', function ($resource) {
return $resource(
'api/OfficeObj/:id',
{ id: '@id' },
{ update: { method: 'PUT' } }
);
});
function OfficeCtrl($scope, $location, OfficeNames) {
$scope.Offices = OfficeNames.query();
}
function OfficeObjCtrl($scope, $location, OfficeObjCode) {
$scope.Codes = OfficeObjCode.query();
}
Note: I am using Web API/Angular/Petapoco/SQL Server
491
This can be achieved using cell edit template feature on the dropdown columns and in the first dropdown's change event, the second dropdown data can be modified(using query property) based on the selected value.
Go to the Conditionals tab of the second dropdown. Add a new condition that will show different Choices when the first dropdown's value is Mobile. And that's it. The Choices of the second dropdown will vary depending upon the option selected in the first dropdown.
$(document). ready(function () { ... }) ; This function is required because it automatically fires the JavaScript code on page load. We need this function in our code since we want to populate the drop-down list 'firstList' automatically whenever a page is displayed to the user.
You shouldn't need 2 controllers for this, in fact that is probably one of the problems.
Once they are within the same scope you can easily tie them together. Use ng-change on the first option to trigger a function that gets the values to populate the second option.
Example Fiddle: http://jsfiddle.net/TheSharpieOne/Xku9z/
Also, you can use ng-show with the second select's options array length to only show the second select when it has been populated.
Example Fiddle: http://jsfiddle.net/TheSharpieOne/Xku9z/1/
155
I implemented like following, Hope it helps :)
Controller code
var app = angular.module("app",[]);
app.controller("ctrl",function($scope){
$scope.key_options = [
{table:"Table_1",key:"age_flg",key_label:"Age"},
{table:"Table_1",key:"ethnicity_flg",key_label:"Ethnicity"},
{table:"Table_2",tab_label:"Table 2",key:"green_flg",key_label:"Green Flag"},
{table:"Table_2",tab_label:"Table 2",key:"life_flg",key_label:"Life Flag"}
];
$scope.options = [
{table:"Table_1",tab_label:"Table 1"},
{table:"Table_2",tab_label:"Table 2"}
];
$scope.sel = function(){
if($scope.key_attr){
console.log($scope.sel_attr['table']);
console.log($scope.key_attr['key']);
};
}
});
html code:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<script src="angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="ctrl">
<select ng-model="sel_attr" ng-init="sel_attr = options[0]" ng-options="attr['tab_label'] for attr in options"></select>
<select ng-model="key_attr" ng-init="key_attr = key_options[0]" ng-options="attr['key_label'] for attr in key_options |filter: {table: sel_attr['table']}" ng-change="sel()"></select>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With