I have a select box which I am using with an angular object as the value i.e.
{identityName:'Passport',identityId:1}
<select name="identityProof" ng-model="identityProof" ng-change="changeProofOfIdentity()" ng-options="identity as identity.identityName for identity in identityProofList track by identity.identityId" id="identityProofList" class="form-control" data-placeholder="" size="1"></select>
I have Done this setup so I can get identity id and identity label in ng-onchange function.
As you can see I have used track by identity.identityId I wanted to select the option by only by identityId only i did
$scope.identityProof = {identityId:userDetails.identityId,identityName:""};
Now the option with the given value get selected, but when I try to get the $scope.identityProof i.e. select box value, I only get the identityId, not the identityName, as I can see the option selected have both the name and values, how can I get both? Do I need to manage it by using jquery or javascript by getting the label of the selected value and passing it as identityName? Or there is an option by which I can reload the selected object to have both the values?
You can use simple select instead of ng-option. See the following example and let me know.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select name="identityProof" ng-model="identityProof" size="1">
<option ng-repeat="identity in identityProofList" value="{{identity}}">
{{identity.identityName}}
</option>
</select>
<span ng-if="identityProof">Selected value = {{identityProof}}</span>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.identityProofList = [{'identityName':'Passport','identityId':1}];
});
</script>
</body>
</html>
Related
I eventually need to create a select box with 4 options - Module 1 to 4. When an option is selected I need to send the number which was selected to the controller so that it can return different datasets for a chart.
That is the end goal, however experimenting with different code pens I simplified my problem down to just trying to get a variable from an input box.
I can get the value to appear on the template but I can not access it in the controller. How can I make the function in the controller work with the passed input data?
html
<body ng-app="plunker" ng-cloak>
<div ng-controller="MainCtrl">
<h1>Hello {{name}}</h1>
<p>Start editing and see your changes reflected here!</p>
</div>
<input placeholder="Module" type="text" ng-change="moduleChange(myModule)"
ng-model="myModule" ng-model-options="{debounce: 1000}">
{{myModule}}
</body>
script.js
angular.module('plunker', []).controller('MainCtrl',
function($scope) {
$scope.name = 'Plunker';
$scope.moduleChange = function(myModule) {
alert(myModule);
console.log(myModule);
$scope.name = myModule;
}
});
I thought that I would get an alert every time I changed the input but nothing is happening. nothing is logged to the console and the $scope.name variable appears to not change.
Where am I going wrong? Thx
Also any pointers for making it work inside a select box would be great too!
plunkr
Move ng-controller="MainCtrl" to the outer element (thats the reason why the function was not fired):
<body ng-app="plunker" ng-controller="MainCtrl" ng-cloak>
You don't need to pass the value into the function, you have the value with ng-model:
<input placeholder="Module" type="text" ng-change="moduleChange()" ng-model="myModule" ng-model-options="{debounce: 1000}">
$scope.moduleChange = function() {
alert($scope.myModule);
console.log($scope.myModule);
$scope.name = $scope.myModule;
}
I am new to Angular JS. I have 1 controller and 2 views. 1st view is supposed to be filled with user. when user filling the data I am storing those values using ng-model in controller(For $scope). After submission of the form, I want to use that data in 2nd page. But I am not getting anything. is there any rule like one controller should be specific to one view. Because when I try to display data on 1st pageI am getting correctly. But when I try the same code onpage2.html I am not getting any value and any error even though page is loaded. I searched a lot on SO. but could not find proper solution. I would be very thankful to U, if anyone of U helps me.Thanks a lot in advance
script.js
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.item="";
$scope.remarks="";
$scope.divCount=[{}];
$scope.addDiv=function(){
$scope.divCount.push({});
};
})
Page1.html
<html>
<head>
<title>My AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body
<form action="page2.html">
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="count in divCount">
Item : <textarea rows="4" cols="50" ng-model="item"> </textarea> <br><br/>
Remarks: <textarea ng-model="remarks" rows="2" cols="50"></textarea> <br><br/>
<div>
<button ng-click="addDiv();">Add Another Item</button>
</div>
</div>
</div>
<input type="submit" value="submit"/>
</form>
</body>
</html>
page2.html
<div ng-controller="myCtrl">
<div> item: {{item}} </div>
<div> remarks: {{remarks}}</div>
</div>
If you want use one controller in two page use ui-router .
You can see here for more infomation
https://github.com/angular-ui/ui-router/wiki
But i recommend you dont do that using a single controller for multiple views (pages, as you say) is a very poor design for an angular app
On click of submit button in Page1.html store the required data in a service/factory. Retrieve the data from the service/factory in page2.html
Can we display alias name in the select options of dropdown using Angular JS
Issue :
Trying change Boolean value true to Ascending and false to Descending in the display of dropdown options and also trying to retain boolean value on selection of alias name - Ascending or Descending
HTML:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Trying to show dropdown options Ascending or Descending instead of true or false<br><br>
<select ng-model="selectedName" ng-options="x.ascending for x in names">
</select><br><br>
{{selectedName}}
</div>
</body>
</html>
JS:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = [{"name":"xxxx","ascending":true},{"name":"yyyy","ascending":false}];
});
http://codepen.io/nagasai/pen/ZBMLep
If you wish to show Ascending/Descending instead of true/false then you can just add one ternary condition like below.
<select ng-model="selectedName" ng-options="(x.ascending ? 'Ascending' : 'Descending') for x in names track by x.ascending"></select>
Angular is not able to reflect selected option in select input. Below is my complete code. Hospital One should have been selected, but not happening, what could be the reason ?
I've also put the same code snippet in JsBin also.
angular.module('testApp', [
])
.controller('AppController', function(){
var vm = this;
//
vm.schedule = {
date : "2015-5-25",
organization : {
"_id":"55df26cf756549c15b5fbcd2",
"name":"Hospital One",
"kind":"HOSPITAL",
"email":"somehospital1#hospital.com"
}
};
//
vm.user = {
name : "Some user name",
affiliates : [
{
"_id":"55df26ea756549c15b5fbcd5",
"createdOn":"2015-08-27T15:04:10.376Z",
"organization":{
"_id":"55df26cf756549c15b5fbcd2",
"kind":"HOSPITAL",
"name":"Hospital One",
"email":"somehospital1#hospital.com"
}
},
{
"_id":"55df26ea756549c15b5fbcd4",
"createdOn":"2015-08-27T15:04:10.375Z",
"organization":{
"_id":"55dbfd280713a3aa0d85158a",
"kind":"CLINIC",
"name":"Some Clinic",
"email":"someclinic#clinic.com"
}
}
]
};
})
;
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
</head>
<body ng-controller="AppController as vm">
<h3>Selected Is : </h3>
<pre>{{ vm.schedule.organization | json }}</pre>
<h3>But selection is not reflecting in select</h3>
<select ng-model="vm.schedule.organization" ng-options="affiliate.organization as affiliate.organization.name for affiliate in vm.user.affiliates | orderBy : 'organization.name' track by affiliate.organization._id">
<option value="">-- Choose Organization --</option>
</select>
</body>
</html>
From ngOptions docs:
select as and track by:
Do not use select as and track by in the same expression. They are not
designed to work together.
Just remove the 'track by' and it'll work fine.
<select ng-model="vm.schedule.organization" ng-options="affiliate.organization as affiliate.organization.name for affiliate in vm.user.affiliates | orderBy : 'organization.name'">
working bin
-----EDIT------
Your options and your selected value are two different objects at first, therefore you'll always see the <-- Choose Organization --> option as selected before changing the select.
In order to solve that you need to bind the selected to be one of the options.
here's a working bin that solves that issue as well
I have a select cascade, but I currently can't capture the first selected option, only the one of the second select.
I want to capture the two options selected by the user when the second selection is changed, so I could send this information to an asynchronous request.
HTML code:
<!DOCTYPE html>
<html ng-app>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
<script>
function ListDropdown($scope){
$scope.ccvms={lista01:['1','3','5','7','9'],lista02:['2','4','6','8','10']}
$scope.send=function(x){
console.log(x)
}
}
</script>
</head>
<body>
<div ng-controller="ListDropdown">
<select ng-model="nums" ng-options="ccvm for (ccvm, nums) in ccvms"></select>
<select ng-disabled="!nums" ng-model="num" ng-options="num for num in nums" ng-change="send(num)"></select>
</div>
</body>
</html>
You'll need to make the first select's model to be the key (rather than the value), and then use obj[key] as the source of the second ng-options.
<select ng-model="ccvm"
ng-options="ccvm as ccvm for (ccvm, nums) in ccvms"></select>
<select ng-model="num"
ng-disabled="!ccvm"
ng-options="num for num in ccvms[ccvm]"
ng-change="send(num, ccvm)"></select>