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>
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
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
I am using Angular Js v1.6.1. I used following code to generate select list
<select class="form-control" ng-model="selectedLocation">
<option ng-repeat="item in locations" value="{{item}}">
{{item}}
</option>
</select>
In Google chrome I am getting results as excepted as shown in image below.
But in firefox, I got the following results
There is blank after select location in firefox. How to resolve this issue?
Location Object:
Bootstrap Version: 3.3.7
FireFox version: 51.0.1 (32-bit)
It is not recommended way to use ng-repeat in options if you want to generate options dynamically.
Try ng-options instead.
Can you check the below and let me know if the problem still persist ?.
(function() {
'use strict';
angular.module('myApp', []);
angular.module('myApp').controller('MainCtrl', ['$scope',
function($scope) {
$scope.locations = ['Farm1', 'Farm2', 'All'];
}
]);
}());
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body class="container" ng-controller="MainCtrl">
<div>Select Item</div>
<select class="form-control" ng-init="selectedLocation= locations[0]" ng-model="selectedLocation" ng-options="item as item for item in locations" style="width:150px">
</select>
<div>Selected item: {{selectedLocation}}</div>
</body>
</html>
Here I used same version but I don't have any problem . plunker here and image here
// Code goes here
var app = angular.module('myApp', []);
app.controller('MainCtrl', function ($scope) {
$scope.locations = ['Farm1', 'Farm2', 'All'];
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="jquery#2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script data-require="angular.js#1.6.1" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body class="container" ng-controller="MainCtrl">
<div>Select Item</div>
<select class="form-control" ng-model="selectedLocation">
<option ng-repeat="item in locations" value="{{item}}">
{{item}}
</option>
</select>
<div>Selected item: {{selectedLocation}}</div>
</body>
</html>
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 am working through Pro AngularJS by Adam Freeman and have not been able to get the Using Checkboxes example to work.
The example tries to show that you can set attributes ng-true-value="Hurrah!" and ng-false-value="Boo!" and are displayed through ng-model="inputValue".
This is not working.
I am only able to get this sample to work by setting integer values inside ng-true-value and ng-false-value.
<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
<title>Forms</title>
<script src="angular.js"></script>
<link href="bootstrap.css" rel="stylesheet" />
<link href="bootstrap-theme.css" rel="stylesheet" />
<script>
angular.module("exampleApp", [])
.controller("defaultCtrl", function ($scope) {});
</script>
</head>
<body>
<div id="todoPanel" class="panel" ng-controller="defaultCtrl">
<form name="myForm" novalidate>
<div class="well">
<div class="checkbox">
<label>
<input name="sample" type="checkbox" ng-model="inputValue"
ng-true-value="Hurrah!" ng-false-value="Boo!">
This is a checkbox
</label>
</div>
</div>
<div class="well">
<p>Model Value: {{inputValue}}</p>
</div>
</form>
</div>
</body>
</html>
According to the documentation for input[checkbox], ng-true-value and ng-false-value accept expressions. Since you are trying to pass a string literal as the value, you need to enclose them in an addional pair of quotes.
Try ng-true-value="'Hurrah!'" ng-false-value="'Boo!'"