I have a dropdown which uses ng-options (angular).
I have a default option selected with an empty value. (so it has the "selected" attribute and same value as the model)
Whenever I add another element to the ng-options, which is not empty, if the model has an empty value (which is pointing to the default empty option), the new added option is automatically selected.
The value of the model is still empty, but the dropdown now shows the new added option automatically.
I've also tried to make the default option be " " instead of just "", but it still does the same change.
Any way to guarantee new added options are not automatically selected?
`<select class="form-control section" ng-model="action.prop">
<option value="" disabled selected>Select Property</option>
<option ng-repeat="prop in tr.props| orderBy:prop.name"
value="{{prop.name}}"> {{prop.name}} </option>
</select>`
Try this :)
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
<p>{{selectedName}}</p>
<button ng-click="add()">add</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = [""];
$scope.selectedName = $scope.names[0]
$scope.add = function() {
$scope.names.push("new");
}
});
</script>
</body>
</html>
You can simply just set your ng-model in the controller to the following before running your get dropdown function. This way it will always be set to default.
Controller
$scope.action = {};
$scope.action.prop = '';
Even though Roth's solution would work well in my case.
So would Nishant's if I used ng-options and a filter.
I decided instead, on the ng-repeat, to have an ng-if="prop.name != ''".
Since what was happening for me was that for about a second, ng-repeat would have latest prop with empty name for a second, and as ng-model = "", it was setting that option as selected.
<select class="form-control section" ng-model="action.prop">
<option value="" disabled selected>Select Property</option>
<option ng-if="prop.name != ''" ng-repeat="prop in tr.props| orderBy:prop.name"
value="{{prop.name}}"> {{prop.name}} </option>
</select>
Related
I'm trying to get value when I select an option from an AngularJS chosen localytics dropdown.
Here's the code for the dropdown:
<select chosen style="width: 250px"
ng-model="StudentId"
ng-options="allStudent.StudentId as allStudent.Name for allStudent in allStudent">
<option value="">Select</option>
</select>
<h2>Chosen with static options: {{ StudentId }}</h2>
<input type="button" value="Search" ng-click="GetStdCourseList(StudentId)">
And in my controller I have the following function:
$scope.GetStdCourseList = function (StudentId) {
alert(StudentId);
};
When I use alert then it show me 'Undefined' instead of showing value
How can I solve this?
Actually this is ok and I get value when I'm not using chosen search but when I use 'chosen' then it's not working.... Here is the screenshot:
Thanks a lot.
I think you have not selected any options before clicking the button. This works fine for me when I select the option.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.allStudent = [{StudentId: 0, Name: 'name1'}, {StudentId: 1, Name: 'name2'}];
$scope.GetStdCourseList = function (StudentId) {
alert(StudentId);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<select chosen style="width: 250px"
ng-model="StudentId"
ng-options="allStudent.StudentId as allStudent.Name for allStudent in allStudent">
<option value="">Select</option>
</select>
<h2>Chosen with static options: {{ StudentId }}</h2>
<input type="button" value="Search" ng-click="GetStdCourseList(StudentId)">
</div>
well, since ng-model's object is $scope.something itself, try to
replace
alert(StudentId)
become
alert($scope.StudentId)
and i don't think on this case you will need param. just ignore it because $scope covered it for you
that's will do
edited for better readability
I am new to Angular and am trying to build a simple app to teach myself. I have the following select options which are displaying just the keys of a data object so far. What I want to do is show a value underneath the second select box for each team, which shows the value associated with the key when a first option is selected, then adds to that value when the second option selected. How do I do that in angular?
I tried {{v}} for just the first one but that didn't work, and I would still need to add the second one.
<div>Team 1</div>
<br> Player 1:
<select class="form-control" ng-model="selectedItem1">
<option ng-repeat="(k,v) in data.playerInfo">{{k}}</option>
</select>
Player 2:
<select class="form-control" ng-model="selectedItem2">
<option ng-repeat="(k,v) in data.playerInfo">{{k}}</option>
</select>
<!-- show value here -->
<br>
<br>
<br>
<div>Team 2</div>
<br> Player 1:
<select class="form-control" ng-model="selectedItem3">
<option ng-repeat="(k,v) in data.playerInfo">{{k}}</option>
</select>Player 2:
<select class="form-control" ng-model="selectedItem4">
<option ng-repeat="(k,v) in data.playerInfo">{{k}}</option>
</select>
<!-- show value here -->
<div ng-show="k == v">{{v}}</div>
Values would go under the team two boxes.
UPDATE:
This worked for me!
$scope.calc = function() {
$scope.calculatedValue = Number($scope.selectedItem1);
if($scope.selectedItem2){
$scope.calculatedValue = Number($scope.selectedItem1) + Number($scope.selectedItem2);
}
}
$scope.calc2 = function() {
$scope.calculatedValue2 = Number($scope.selectedItem3);
if ($scope.selectedItem4) {
$scope.calculatedValue2 = Number($scope.selectedItem3) + Number($scope.selectedItem4);
};
}
<div>Team 1</div>
<br> Player 1:
<select class="form-control" ng-model="selectedItem1" ng-change="calc()">
<option ng-repeat="(k,v) in data.playerInfo" ng-value="v" >{{k}}</option>
</select>
Player 2:
<select class="form-control" ng-model="selectedItem2" ng-change="calc()">
<option ng-repeat="(k,v) in data.playerInfo" ng-value="v">{{k}}</option>
</select>
<!-- show value here -->
<p> Total Value: {{calculatedValue}} </p>
<br>
<br>
<br>
<div>Team 2</div>
<br> Player 1:
<select class="form-control" ng-model="selectedItem3" ng-change="calc2()">
<option ng-repeat="(k,v) in data.playerInfo" ng-value="v" >{{k}}</option>
</select>Player 2:
<select class="form-control" ng-model="selectedItem4" ng-change="calc2()">
<option ng-repeat="(k,v) in data.playerInfo" ng-value="v">{{k}}</option>
</select>
<!-- show value here -->
<p> Total Value: {{calculatedValue2}} </p>
I put together a fiddle based on your example. You need to add a change event to the select forms to tell your controller to calculate the values and create a new property on the $scope which stores the calculated value, which can be bound to in the html.
HTML
<select class="form-control" ng-model="selectedItem1" ng-change="calc()">
<option ng-repeat="(k,v) in data.playerInfo" ng-value="v">{{k}}</option>
</select>
JS
// these should be set to default number values
$scope.selectedItem1 = 0;
$scope.selectedItem2 = 0;
$scope.data = {
playerInfo : {
a:1,
b:2,
c:3
}
};
// this method will calculate the value
$scope.calc = function(){
$scope.calculatedValue = parseFloat($scope.selectedItem1) + parseFloat($scope.selectedItem2);
}
One thing to note, you need to set the default values of selectedItem1 and selectedItem2 or the change event won't know how to calculate the non-numeric undefined values of the unchanged selects.
Here is a working example based on your code:
https://jsfiddle.net/gu9fm5xh/1/
so a couple of things,
First: using ng-repeat in options is usually not they way you want to go, you want to use ng-options on the select element. But this isn't a major problem.
<select class="form-control" ng-options="data.displayValue for data in data.playerInfo" ng-model="selectedItem4">
This will show on the select "data.displayValue" which can be any property on the playerInfo object. And it will set selectedItem4 to the actual data object.
Second: In your div you are using the k and v variables that are in your ng-repeat. ng-repeat creates its own scope and the scope variables k and v are not accessible outside of your repeat and each ng-repeat uses its own k and v. If you want to use the selected values outside of the ng-repeat you need to set them to scope variable. luckily with option you can do this my setting the value field.
<option ng-repeat="(k,v) in data.playerInfo" ng-value="v">{{k}}</option>
ng-options does this for you behind the scenes. What this will do is bind your selects ng-model to the current option being shown. so if this option is under this select then selectedItem4 will be set to the value of the option selected.
<select class="form-control" ng-model="selectedItem4">
Meaning in your div if you change it to be
<div >{{selectedItem4}}</div>
This should work, a little better.
I have select box and have default value is text "please select one", I need solution while if any other option is selected (eq. abc) and user need to clear what he has selected(important is getting default value selected again) with button("Clear and go Next") event.
http://plnkr.co/edit/HIOOHBHaibHmDtiLdGfh?p=preview
<select ng-model="item" ng-options="item.name for item in options"
ng-change="doSomething()">
<option value="">Please select one</option>
</select>
I'm not entirely sure what you're asking, but if you need to clear the selected value, you can do something as simple as:
HTML
<button ng-click="reset()">Clear and move Next</button>
JS
$scope.reset = function() {
$scope.item = "";
}
Plunk
I'm using angular-ui's select2 directive. In terms of functionality it's working fine (after some hair pulling) but I just realized that what I did to make it work is now preventing select2 from displaying the selected value.
<select
ui-select2
id="entityDropDown"
ng-model="selectedUser"
ng-value="users[selectedUser].name"
ng-change="getUserInfo(users[selectedUser])">
<option></option>
<option ng-repeat="user in users" ng-value="{{$index}}" value="{{user.name}}">{{user.name}}</option>
</select>
At first I was using ngOptions, but it isn't compatible with Select2 so I had to use ngRepeat. My ngRepeat needs to send the selected user Object to a function on change. To accomplish this I had to use ng-value or value to bind the selected user $index to the select elements ng-modal selectedUser from there I could look up the object in users based on the index. BUUUT, now that's I've given my options the $index, the value returned to select2 doesn't make sense I guess and it's just giving me my place holder.
.run(['uiSelect2Config', function(uiSelect2Config) {
uiSelect2Config.placeholder = "Click here";
uiSelect2Config.dropdownAutoWidth = true;
}]);
I tried giving the select element it's own ng-value to kind of do what the ngChange was doing and look up the selected users name....but yea that didn't work out.
Actually you could leverage jQuery to fetch the selected option index when the 'entity drop down' has been changed. The example below is a simple demo for your question.
HTML
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>angular ui - select2</title>
<link rel="stylesheet" href="js/select2/select2.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div ng-controller="select2Ctrl">
<select id="entityDropDown" ui-select2 ng-model="selectedUser" data-placeholder="Select a user" ng-change="getUserInfo()">
<option value=""></option>
<option ng-repeat="user in users" value="{{user.name}}">{{user.name}}</option>
</select> VALUE: {{selectedUser}}
<br/><br/>
Selected User info:<br/><br/>
name:
{{selectedUserData.name}}<br/>
id:
{{selectedUserData.id}}
</div>
<script src="js/select2/select2.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="js/angular-ui-select2/src/select2.js"></script>
<script src="js/angularUISelect2.js"></script>
</body>
</html>
Controller
angular.module("myApp",['ui.select2'])
.controller("select2Ctrl",function($scope){
$scope.selectedUser = "";
$scope.selectedUserData = {};
$scope.users = [{id:1,name:"user1"},{id:2,name:"user2"}];
$scope.getUserInfo = function(){
$scope.selectedUserData = $scope.users[jQuery("#entityDropDown")[0].selectedIndex-1];
};
});
ScreenShot
(1) before selection
(2) selecting
(3) after selection
Hope this is helpful.
Try rewriting the html to this:
<select
ui-select2
id="entityDropDown"
ng-model="selectedUser"
ng-change="getUserInfo(users[selectedUser])">
<option></option>
<option ng-repeat="user in users" ng-value="$index">{{user.name}}</option>
</select>
Notice that I removed ng-value from the select and the value attribute from the options (I also removed the {{..}} surrounding the $index)
selectedUser should always be an integer that represents an index in the users array
We have some drop downs in our app that we can NOT use ng-options with because we need to set the title attribute on the <options> tag itself which is not possible with ng-options.
The reason we need the title is because IE < 9 chops off values that are to long and they are only visible with the title(shows up on hover of the element)
Now, to see the issue I'm having look at the following JS fiddle.
http://jsfiddle.net/nstuart/nF7eJ/
(HTML Bit)
<div ng-app="myApp" ng-controller="MyCtrl">
<select ng-model="params.value">
<option value="">Any</option>
<option ng-repeat="v in options" value="{{v.value}}" title="{{v.name}}" ng-selected="{{v.value == params.value}}">{{v.name}}</option>
</select>
<p>{{params.value}}</p>
</div>
Ideally the select would have 'test3' selected, but you can see it gets set to an empty option instead. I understand this is from the fact that the value of ng-model is not present in the ng-options, but thats because I have not defined one!
Any ideas on how to get something like this working? Possibly even be able to add title to the options generated by ng-options so we could use that instead?
EDIT
Updated the fiddle at: http://jsfiddle.net/nstuart/nBphn/2/ to as described in the answer below.
Actually, just remove the curly braces from the expression in ng-selected and it will work:
<option ng-repeat="v in options"
value="{{v.value}}"
title="{{v.name}}"
ng-selected="v.value == params.value">{{v.name}}
</option>
fiddle
<option ng-repeat="v in options" value="{{v.value}}" title="{{v.name}}"
ng-selected="checkOption(v.value)">{{v.name}}</option>
$scope.checkOption = function(value){
return($scope.params.value == value);
}
Fiddle
[UPDATE] forgot to pass value variable. Updated fiddle and answer.
For manual options, you only need to use ng-model directive. This ng-model directive gives two way data binding for the selected option.
jsfiddle: http://jsfiddle.net/rpaul/1p9b5et8/1/
<body ng-app ng-controller="AppCtrl">
<select ng-model="selectedFruit" >
<option value ='1'> Apple</option>
<option value ='2'> Orange</option>
</select>
Selected value is {{selectedFruit}}
</body>
function AppCtrl($scope) {
$scope.selectedFruit = '1';
}
You might also want to take a look at the select2 directive in http://angular-ui.github.com/#directives-select2
In my code, I re-calculate select title on ng-change="changeItem()"
HTML
<div ng-app="myApp" ng-controller="MyCtrl">
<select ng-options="item.id as item.title for item in items"
ng-model="selectedId" ng-change="changeItem()" title="{{myTitle}}">
<option value="" disabled selected style="display: none;">Select Item</option>
</select>
<div>
{{selectedId}}
</div>
<div>
{{myTitle}}
</div>
</div>
app.js
angular.module('myApp', []);
function MyCtrl($scope) {
$scope.items = [{
id: 1,
title: "Icebox"
}, {
id: 2,
title: "Summer"
}, {
id: 3,
title: "Milestone"
}];
$scope.changeItem = function() {
$scope.myTitle = undefined;
for(var i=0; i<$scope.items.length; i++){
if($scope.items[i].id == $scope.selectedId){
$scope.myTitle = $scope.items[i].title;
}
}
}
}
Fiddle