How to set particular value to a dropdown the angular way? - javascript

I have a simple angular dropdown like bellow:
<select class="form-control" ng-model="docPropIdentityModel.OwnerLevel"
ng-options="ownerLevel as ownerLevel.LevelName for ownerLevel in ownerLevels track by ownerLevel.OwnerLevelID">
<option value="">--Select--</option>
</select>
I've a value for OwnerLevelID, I want to assign the OwnerLevelID as the value of the dropdown & show the respective LevelName. I can easily do this by using jquery but want to do it the angular way.
I tried to assign the value for the model like bellow:
$scope.docPropIdentityModel.OwnerLevel = "123456";
But it didn't work. How it can be done?

As you are using track by expression, You need to set the OwnerLevelID property of object associated with ngModel.
$scope.docPropIdentityModel.OwnerLevel = { OwnerLevelID : "123456"};

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script>
angular.module("myapp", [])
.controller("MyController", function ($scope) {
$scope.register = {};
$scope.register.countryId = "4";
$scope.register.countries = [{
id: "1",
name: "India"
}, {
id: "2",
name: "USA"
}, {
id: "3",
name: "UK"
}, {
id: "4",
name: "Nepal"
}];
});
</script>
</head>
<body ng-app="myapp">
<div ng-controller="MyController">
<div>
Country Name : <select ng-model="register.countryId" ng-options="country.id as country.name for country in register.countries"></select>
</div>
<div>
Country-Id : {{register.countryId}}
</div>
</div>
</body>
</html>

Related

Angularjs: select not working when ng-model a json object

Once I use ng-options for a select I am unable to get dafault selection to work on nested json objects.
once I have a bit more complicated json and the select should handle a child object my select does not default select the proper value.
Given test = {"id":3,"title":"Test","product":{"id":4,"name":"Test1"}} as my ng-model test.product and
[{
"id": 4,
"name": "Test1"
}, {
"id": 5,
"name": "Test2"
}]
as my selection option. (see http://embed.plnkr.co/mpnislw77UBSEdHl4UKN/)
I seem to be unable to figure out how to facilitate default selection.
If you use track by item.id it works - http://embed.plnkr.co/mpnislw77UBSEdHl4UKN. The marked answer was not very obious since the ng-model is nested in iself. but it contains the correct information.
The only problem with your code is that you've assigned a new object to $scope.test.product and you're using it as the ng-model of the dropdown.
This makes AngularJS unable to find it inside the possible values, which are $scope.testarray. AngularJS will compare two objects by their reference, which you broke when you assigned a new object to $scope.test.product.
To make it working, change $scope.test as follows:
$scope.test = {
"id": 3,
"title": "Test",
"product": $scope.testarray[1]
}
This is how to select with ngOptions and setting a default value
Example
angular.module('defaultValueSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
availableOptions: [
{id: '1', name: 'Option A'},
{id: '2', name: 'Option B'},
{id: '3', name: 'Option C'}
],
selectedOption: {id: '3', name: 'Option C'} //This sets the default value of the select in the ui
};
}]);
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="defaultValueSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<label for="mySelect">Make a choice:</label>
<select name="mySelect" id="mySelect"
ng-options="option.name for option in data.availableOptions track by option.id"
ng-model="data.selectedOption"></select>
</form>
<hr>
<tt>option = {{data.selectedOption}}</tt><br/>
</div>
</body>
</html>
try this, hope it will help
<option value="" ng-if="false"></option>

Not able to disable a field on selection of dropdown

I am trying to hide an input field based on the selection of dropdown, if the selected value is "Y" input field should be disabled. I am not sure what is going here.
-followed stackover flow previous question: Disable Input field according to select option value Angularjs
Any help is appreciated, thanks in advance
var myapp = angular.module("myModule", []);
myapp.controller("myController", function($scope){
var orgData = [
{ id: '1', roleName: "VPL", orKey: "SSB", sendAllFundsFlag: "Y", fundId:""},
{ id: '2', roleName: "VPN", orKey: "JPM", sendAllFundsFlag: "N", fundId: "0023"},
{ id: '3', roleName: "VGN", orKey: "INV1", sendAllFundsFlag: "N", fundId: "0026"},
{ id: '4', roleName: "SPC", orKey: "VPN", sendAllFundsFlag: "N", fundId: "0036"}
];
$scope.orgData = orgData;
$scope.selectEdit = function(id){
$scope.orgRoleData = id;
};
});
<html ng-app="myModule">
<head>
<title> CRUD Operations </title>
<script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js></script>
</head>
<body ng-controller="myController">
<select name="select" ng-model="orgRoleData.sendAllFundsFlag" ng-change="disablefundId = (sendAllFundsFlag==Y)">
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
<input type="text" ng-model="orgRoleData.fundId" ng-disabled="disablefundId"/>
</body>
</html>
I think there are 2 problems in your select
1) there is no sendAllFundsFlag in your $scope,it should be
orgRoleData.sendAllFundsFlag
2) values of your input are string therefore you should add ' ' when comparing model with value
"disablefundId = (sendAllFundsFlag=='Y')"
Plunker
I would move your evaluation to the ng-disabled expression itself. Otherwise you have to have more than one evaluation occur (one to set the disablefundId value, and again when ng-disabled evaluates.
ng-disabled="orgRoleData.sendAllFundsFlag === 'Y'"
Also, as NTP pointed out, your evaluation is against a text string, so the Y is enclosed in single quotes here.
var myapp = angular.module("myModule", []);
myapp.controller("myController", function($scope){
var orgData = [
{ id: '1', roleName: "VPL", orKey: "SSB", sendAllFundsFlag: "Y", fundId:""},
{ id: '2', roleName: "VPN", orKey: "JPM", sendAllFundsFlag: "N", fundId: "0023"},
{ id: '3', roleName: "VGN", orKey: "INV1", sendAllFundsFlag: "N", fundId: "0026"},
{ id: '4', roleName: "SPC", orKey: "VPN", sendAllFundsFlag: "N", fundId: "0036"}
];
$scope.orgData = orgData;
$scope.selectEdit = function(id){
$scope.orgRoleData = id;
};
});
<html ng-app="myModule">
<head>
<title> CRUD Operations </title>
<script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js></script>
</head>
<body ng-controller="myController">
<select name="select" ng-model="orgRoleData.sendAllFundsFlag">
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
<input type="text" ng-model="orgRoleData.fundId" ng-disabled="orgRoleData.sendAllFundsFlag === 'Y'"/>
</body>
</html>

AngularJS how to set dynamically value of binding element

I need, based on an in page variable, to change value of a binding element.
Here it is the in page var:
<script type="text/javascript">
var myVar = 'value1';
</script>
This is the select with the bind element:
<select value="">
<option ng-repeat="value in valueList">
{{myNewValue()}}
</option>
</select>
Here is the controller:
$scope.inPageVar = $window.myVar;
$http.get(jsonUrl).then(function(result) {
$scope.valueList = result.data.valueList;
$scope.myNewValue = function() {
return $scope.valueList[0].additional + $scope.inPageVar;
};
});
Here the JSON structure:
"valueList": [
{
"additionnal": {
"value1": "this is value 1",
"value2": "this is value 2"
}
},
{
"additionnal": {
"value1": "this is value 3",
"value2": "this is value 4"
}
}
]
I would like to know how to concatenate the in-page var value with the element of the get function.. Thank you!
(function() {
angular.module("CombineModule", []).controller('MyController', function() {
this.values = [{
"additional": {
"value1": "this is value 1",
"value2": "this is value 2"
}
}, {
"additional": {
"value1": "this is value 3",
"value2": "this is value 4"
}
}];
this.myNewValue = function(index) {
return this.values[index].additional[myVar];
};
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app="CombineModule">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
var myVar = 'value1';
</script>
</head>
<body ng-controller="MyController as v">
<select value="">
<option ng-repeat="value in v.values">
{{v.myNewValue($index)}}
</option>
</select>
<script src="app.js"></script>
</body>
</html>
If you want to expose myVar globally,
write window.myVar = 'some value' instead of var myVar = 'someval'.
Or if you want to make this available into $rootScope.myVar = 'some value'
Then in your logic,
return $scope.valueList[0].additional[window.myVar];

Unable to bind value to ng-model for select options in an event

HTML
<select class="form-control"
ng-model="campaign.CampaignTypeId"
ng-options="CampType.id as CampType.name for
CampType in CampaignTypeIds track by CampType.id" >
<option value="">Select campaign type</option>
</select>
JavaScript
$scope.CampaignTypeIds = [{ id: "1", name: "Location" }, { id: "2", name: "Brand" }];
$scope.getSingleCampaignResponse = function (response) {//http get method gets the resposne
$scope.campaign= response
}
In an event I am getting campaign object as a response and that object has CampaignTypeId:1, but I cloud not able to bind CampaignTypeId to ng-model for select option
The trick is the ng-options you have to put it like this ng-options="CampType as CampType.name for CampType in CampaignTypeIds track by CampType.id". You can see it working in this plunker. Also you can bind the ng-model to an object, like ng-model="campaign".
The markup:
<body ng-app="myApp" ng-controller="myCtrl">
<select class="form-control"
ng-model="campaign"
ng-options="CampType as CampType.name for
CampType in CampaignTypeIds track by CampType.id" >
<option value="">Select campaign type</option>
</select>
</body>
And on the controller:
angular.module('myApp', [])
.controller('myCtrl', ['$scope', '$timeout', function($scope, $timeout) {
$scope.CampaignTypeIds = [{
id: "1",
name: "Location"
}, {
id: "2",
name: "Brand"
}];
$scope.getSingleCampaignResponse = function(response) {
$scope.campaign = response;
}
//simulating request
$timeout(function() {
$scope.getSingleCampaignResponse({ id: "2" });
// or if you want like this
// $scope.getSingleCampaignResponse({ id: "2" , name : "brand"});
}, 2000)
}]);
Note the timeout is simulating the request after 2 seconds.

How can I disable to select the particular option from Angular JS dropdown?

I want to disable a particular option from AngularJS dropdown.
It should be listed in the dropdown but should not allow it to be selected. So i need to disable it.
MyFile.tpl.html
<select class="form-control" ng-model="selectedFruits"
ng-options="fruit as fruit.name for fruit in fruits">
</select>
MyController.js
$scope.fruits = [{'name': 'apple', 'price': 100},{'name': 'guava', 'price': 30},
{'name': 'orange', 'price': 60},{'name': 'mango', 'price': 50},
{'name': 'banana', 'price': 45},{'name': 'cherry', 'price': 120}];
Here all the fruit names should be listed in the dropdown but mango and cherry should be disabled and should not allow the user to select it.
Is it possible? If possible, please let me know the solution please.
select options are disabled with disabled attribute. Since ng-options doesn't support disabling, you'll have to generate options within ng-repeat and set ng-disabled based on requirements.
Template:
<select class="form-control" ng-model="selectedFruits">
<option
ng-repeat="fruit in fruits"
ng-disabled="disabledFruits.indexOf(fruit.name) !== -1"
ng-value="fruit">
{{fruit.name}}
</option>
</select>
Inside controller:
$scope.disabledFruits = ["mango", "cherry"]
JSBin.
Just came across this and it worth mentioning that this is possible as of Angular version 1.4.0-rc.1
here are docs ngOptions
and some conversations Angular Github
HTML:
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="testController">
<select ng-model="myPerson" ng-options="person.name disable when person.isDisabled for person in people">
</select>
</body>
</html>
JS:
var app = angular.module("testApp", []);
app.controller("testController", function($scope) {
$scope.people = [{
"id": "0",
"name": "Homer",
"surname": "Simpson",
"isDisabled": false
}, {
"id": "1",
"name": "Peter",
"surname": "Griffin",
"isDisabled": false
}, {
"id": "2",
"name": "Philip",
"surname": "Fry",
"isDisabled": false
}, {
"id": "3",
"name": "Humpty",
"surname": "Dumpty",
"isDisabled": true
}, ];
$scope.myPerson = $scope.people[2];
});
and Plunker
If you set disabled value as default it wont work and you will see blank selected item instead.

Categories