I would like to create in angular (1.0) an select list with a default option who has value. I don't understand why, but when I add a value to default option, it is not rendered proper. My code is this:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="jquery#*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="bootstrap#*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myController">
<h1>States in India</h1>
<select ng-options="state for state in states" ng-model="selectedState">
<option value="">-- choose --</option>
</select>
<br/>
<br/>
<h1>States in India - not working proper (default option not displayed)</h1>
<select ng-options="state for state in states" ng-model="selectedState">
<option value="not_empty">-- choose --</option>
</select>
</body>
</html>
Can someone help me to understand this behavior? Why when I add the value attribute to default options it is no longer added to select?
Later edit:
The issue I'd like to clarify is not about model, but about option element with not empty value:
<option value="not_empty">-- choose --</option>
I don't understand why this option is not rendered! If I add
<option value="">-- choose --</option>
then it appears (is rendered) inside drop down element!
Plunker here: http://plnkr.co/edit/YDGodWKRqMROXjgEGXd2?p=preview
If you choose to use ng-options you cant't add the default option with html, you need to bind the ngModel to one of the options:
<select ng-options="state.name for state in states" ng-model="selected">
</select>
This is a working example
If you want a message saying "Select State" you should use ng-repeat on the option tag:
<select ng-model="$ctrl.otherSelect">
<option value="{{someValue}}">Select State</option>
<option ng-repeat="state in states" value="state">{{state}}</option>
</select>
Update: Fixed binding on value attribute
Related
<div class="form-group">
<label class="control-label col-sm-2" for="tehsil">Select Tehsil</label>
<div class="col-sm-10">
<select class="selectpicker" id="tehsil" multiple data-actions-box="true" name="tehsil" data-live-search="true"
ng-model="tehsil">
<option ng-repeat="tp_id in tehsil" value="{{tp_id}}">{{tp_id}}</option>
</select>
</div>
</div>
when i inspect element they look like this i am getting this data on page load using ng-init:
[<option ng-repeat="tp_id in district" value="ATTOCK" class="ng-binding ng-scope">ATTOCK</option>][1]
I have created this Plunker based on the code you provided in the google drive, this appears to be doing what you are asking already? When you select the values get assigned to the ng-model 'sl_tehsils'. Please see plunker as I have printed the resulting values to the screen https://plnkr.co/edit/AIsFEXAGQLUCCsC4ajqw?p=preview.
HTML:
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="form-group">
<label class="control-label col-sm-2" for="tehsil">Select Tehsil</label>
<div class="col-sm-10">
<select class="selectpicker" id="tehsil" multiple data-actions-box="true" name="tehsil"
data-live-search="true" ng-model="sl_tehsils">
<option ng-repeat="tp_id in tehsils" value="{{tp_id}}">{{tp_id}}</option>
</select>
</div>
{{sl_tehsils}}
</div>
</body>
</html>
JS:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.tehsils =["Ahmadpur East Tehsil", "Alipur Tehsil", "Arif Wala Tehsil", "Astore Sub-division"];
});
I upgrade my bootstrap version because first one was complied in cache and was unable to upload the new content.
Currently i using bootstrap 3.3.4
This question already has answers here:
Remove Blank option from Select Option with AngularJS
(12 answers)
Closed 5 years ago.
I have a queation to AngularJS Guru. Is it possibile to remove blank value from next listing where klassList is some list of objects. I need
exactly ng-repeat and not ng-options [{"id":1,"klassName":"11A","pupils":null},{"id":2,"klassName":"12B","pupils":null}] :
<input type="text" class="form-control" ng-model="klassName1"/>
<select class="form-control" ng-model="selectedItem" >
<option ng-repeat="klass in klassList | filter : {klassName : klassName1}">{{klass.klassName}}</option>
</select>
My target is to obtain dropdown list with possibility of filtering values.
Use ng-options
ng-options="givendata as givendata .klassName for givendata in klassList"
angular.module('app', []).controller('SelectorCtrl', function($scope) {
$scope.klassList = [{"id":1,"klassName":"11A","pupils":null},{"id":2,"klassName":"12B","pupils":null}];
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="SelectorCtrl">
<h1>Hello!</h1>
<select class="form-control" ng-model="selectedItem" id="state" ng-model="divisionsSource" ng-options="givendata as givendata.klassName for givendata in klassList">
<option value=''>Select</option>
</select>
</body>
</html>
Here is my html part
<select style="width:250px; height:50px">
<option ng-model="sellerDetails" ng-click="sellerValue(sellerDetails)" >seller 1</option>
<option >seller 2</option>
<option >seller 3</option>
</select>
here is my controller part
$scope.sellerValue= function(sellerDetails){
console.log("invoking sellerValue");
console.log(sellerDetails);
}
what is wrong i am doing here
i am not even invoking the controller part of my sellervalue funtion
There are some points:
Point 1: You've placed the ngModel in <option>, while it should be in <select> tag.
Point 2: ngClick is used to trigger, obviously click, it isn't the correct directive that you should use in this case, because a click doesn't mean that you changed the value of that field. The correct one is ngChange that detects real changes.
Point 3: Since you already have the value of selected item stored in $scope.sellerDetails you don't need to pass it as parameter to your function.
Point 4: I recommend you to use ngOptions instead of doing it statically.
See it working:
(function() {
angular
.module('app', [])
.controller('mainCtrl', mainCtrl);
function mainCtrl($scope) {
$scope.sellers = [];
function loadSellers(max) {
for (var i = 1; i <= max; i++) {
$scope.sellers.push("Seller " + i);
}
}
loadSellers(3);
$scope.sellerValue = function() {
console.log("sellerValue: ", $scope.sellerDetails);
}
}
})();
.select-field {
width: 250px;
height: 50px
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
Statically:
<select class="select-field" ng-model="sellerDetails" ng-change="sellerValue()">
<option>seller 1</option>
<option>seller 2</option>
<option>seller 3</option>
</select>
<hr>
With ng-options:
<select class="select-field" ng-options="seller for seller in sellers" ng-model="sellerDetails" ng-change="sellerValue()">
<option value="" disabled hidden>Select a seller</option>
</select>
</body>
</html>
I hope it helps!!
Try this ,
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.sellerDetails = 'seller 1';
$scope.sellerValue= function(sellerDetails){
console.log("invoking sellerValue");
console.log(sellerDetails);
}
});
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js#1.4.x"></script>
<script src="app.js"></script>
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
<select style="width:250px; height:50px" ng-model="sellerDetails" ng-click="sellerValue(sellerDetails)">
<option >seller 1</option>
<option >seller 2</option>
<option >seller 3</option>
</select>
</body>
I'm struggling to understand how ng-options works with a data source. I've read the docs and I feel like I'm doing exactly what is required, but I still get problems when attempting.
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"> </script>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
angular.module('app', [])
.controller('IndexCtrl', ['$scope', function($scope) {
$scope.types = {
1: "value1",
2: "value2",
5: "value3"
};
}]);
</script>
</head>
<body ng-controller="IndexCtrl">
<select ng-model="type" ng-options="k as v for(k, v) in types">
<option value="">Select Type</option>
</select>
</body>
</html>
I always get this error in the console:
Error:
Expected ngOptions in form of 'select (as label)? for (key,)?value in collection (track by expr)?' but got 'k as v for(k, v) in types'.
What am I doing incorrectly?
See plunkr here:
http://plnkr.co/edit/Bl6u4151KyDkxhYrsdCm?p=preview
This is kind of strange, but it seems like you need to put a space after for. This works:
<select ng-model="type" ng-options="k as v for (k, v) in types">
<option value="">Select Type</option>
</select>
I want to dynamically manage the number of options under a select tag, and automatically select the last added option after updating the options.
Here is what I tried :
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.0.x"
src="http://code.angularjs.org/1.0.7/angular.min.js"
data-semver="1.0.7"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<select ng-model="selectedOption">
<option value="">-----Select an option-----</option>
<option ng-repeat="option in options" value="{{option.value}}">
{{option.name}}
</option>
</select>
<button ng-click="addOption()">Add option</button>
</body>
</html>
When you add an option, the select switch to a non existant value. It seems like the select value update is resolved before the options update.
Does anyone have any idea on how i could fix that ?
You state: I want to dynamically manage the number of options under a select tag, and automatically select the last added option after updating the options.
You can do this by changing your HTML like so (EDITed after comment):
<option ng-repeat="option in options" value="{{option.value}}" ng-selected="option.value==options.length-1"> {{option.name}}</option>
More information on the ng-selected directive
Line 19 in your accompanying js should also be deleted - this line currently reads like so:
$scope.selectedOption = $scope.options.length - 1;