I have a few Select lists on my page one of them works fine the rest of them have a blank item at the top of the options list.
This works
<td>
<select data-ng-model="c.ResultOptionId" ng-change="checkResult(c)">
<option value="" selected>--Select Option--</option>
<option data-ng-repeat="opt in c.ResultOptions" value="{{opt.Value}}">{{opt.Text}}</option>
</select>
</td>
This has a extra blank item
<td>
<select data-ng-model="c.EquipmentId">
<option value="" selected>--Select Equipment--</option>
<option data-ng-repeat="eq in c.Equipment" value="{{eq.Value}}">{{eq.Text}}</option>
</select>
</td>
The HTML generated for the select list item is
<td>
<select data-ng-model="c.EquipmentId" class="ng-pristine ng-valid ng-not-empty ng-touched">
<option value="? number:0 ?"></option>
<option value="" selected="">--Select Equipment--</option>
<!-- ngRepeat: eq in c.Equipment -->
<option data-ng-repeat="eq in c.Equipment" value="2" class="ng-binding ng-scope">EQ-001</option>
<!-- end ngRepeat: eq in c.Equipment -->
</select>
</td>
I'm new to AngularJs but from what I've read this should work. I have checked the data returned from my API call and that is correct there are no unexpected items.
Thanks for any help
If you use ng-repeat to generate the options, as the documentation indicates, the bound value is, always, a string.
But the value stored in the ngModel (c.EquipmentId) is a number. So you're telling Angular: here's a list of options with their values, which are strings, and please select, among the string values, the one equal to this number. Since a string is never equal to a number, angular generates an additional option.
So, as usual, use ng-options to generate your options:
<select data-ng-model="c.EquipmentId"
ng-options="eq.Value as eq.Text for eq in c.Equipment">
<option value="">--Select Equipment--</option>
</select>
And make sure that c.EquipmentId contains one of the proposed equipment values, or is null or undefined.
Here's a snippet working:
var app = angular.module('app', []);
app.controller('mainCtrl', function ($scope) {
$scope.equipments = [];
for (var i = 0; i < 5; i++) {
$scope.equipments.push(i);
}
// If you don't want any blank option => $scope.equip = $scope.equipments[0];
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<table>
<thead>
<tr>
<td>Equipment</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<select data-ng-options="equip as equip for equip in equipments" data-ng-model="equip">
<!-- you can coment this line below, if you don't want blank option -->
<option value="">-- Select equipment--</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Generally, speaking: (1) you should use ng-options for options in a select and (2) a blank or new option means that the current model value for the select does not appear in the list of options.
<td>
<select data-ng-model="c.EquipmentId" data-ng-options="eq.Value as eq.Text for eq in c.Equipment">
<option value="">--Select Equipment--</option>
</select>
</td>
In the javascript, make sure to initialize c.EquipmentId in your controller.
c.EquipmentId = ""; // this will initialize the option to start at the `--Select Equipment--` option.
c.EquipmentId = c.Equipment[0].Value; // this will initialize the option at the first Equipment value.
// for the issue that you stated, it looks like c.EquipmentId is either null or 0, so instead you can do something like this:
if (!c.EquipmentId) c.EquipmentId = "";
Related
I am facing a problem with the below code.
<tr ng-repeat="diag in diags track by diag.id">
<td>
<select id="ddTest" ng-change="changeevent()">
<option value="">Select Number</option>
<option ng-repeat="o in orderNumbers" data-diagId="{{diag.id}}" ng-selected="o==diag.ordernumber">{{order}}
</option>
</select>
</td>
</tr>
$scope.orderNumbers= [1,2,3,4,5,6,7,8,9,10];
In diags object is an array which contains ordernumber in it. I am trying to update the specific ordernumber from ddTest dropdown change to the diags object using the custom attribute data-diagId. I don't have any model for ddTest dropdown (I can add it if needed). I want to populate the value on load and also need to update the parent object with the new order number selected. Can anybody help me to do this ?
Use ng-options directive and ng-model in Your select, then diag.ordernumber will change every time select is changed, so selected option is connected to model without any additional programming. Here full working example:
var app = angular.module("diagApp", []);
app.controller("diagController", function($scope) {
$scope.orderNumbers= [1,2,3,4,5,6,7,8,9,10];
//test diags
$scope.diags=[
{id:1,ordernumber:1},
{id:2,ordernumber:2},
{id:3,ordernumber:3}
];
//to prove that diag is changing
$scope.change=function(diag){
console.log(diag);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="diagApp">
<table ng-controller="diagController">
<tr ng-repeat="diag in diags track by diag.id">
<td>
<select ng-change="change(diag)" id="ddTest" ng-model="diag.ordernumber" ng-options="item as item for item in orderNumbers track by item">
</select>
</td>
</tr>
</table>
</div>
I dug a few hours without finding an answer to what i want to do. I'm working on a complicate form with a lot of variables, so i'll try to narrow my request here :)
var list = [{id:0, name:opt0}, {id:1, name:opt1},{id:2, name:opt2}];
var selected = ['opt1', 'opt2'];
var numberOfRows = 2;
I got a variable number of select based on a variable. So i use ng-repeat like this :
<tr ng-repeat="i in numberOfRows track by $index">
<td>
<select list.indexOf(selected[$index]) as item for item in list></select>
</td>
</tr>
the result should be like this
<tr><td>
<select>
<option label="opt0" value="opt0"></option>
<option label="opt1" value="opt1" selected="selected"></option>
<option label="opt2" value="opt2"></option>
</select>
</tr></td>
<tr><td>
<select>
<option label="opt0" value="opt0"></option>
<option label="opt1" value="opt1"></option>
<option label="opt2" value="opt2" selected="selected"></option>
</select>
</tr></td>
I tried many way to write my ng-option.
what i have actually is the correct number of select with the list inside each of them, but each select should have a different pre selected variable. And they all are selected on the last value of my list. No matter what i try.
ps: the values in my array 'selected' are always in the list[$index].name
If someone knows how to achieve that i will be very happy ^^
....
little side request : Is it possible to do a filter on the list which will remove/hide the selected option trough all the selects?
result like this :
<tr><td>
<select>
<option label="opt0" value="opt0"></option>
<option label="opt1" value="opt1" selected="selected"></option>
//opt2 removed because it's selected in another select
</select>
</tr></td>
<tr><td>
<select>
<option label="opt0" value="opt0"></option>
//opt1 removed because it's selected in the previous select
<option label="opt2" value="opt2" selected="selected"></option>
</select>
</tr></td>
thanks :)
I tried your existing solution on the first part, but i don't know how you manage to make this line of code work:
<tr ng-repeat="i in numberOfRows track by $index">
So i did my own version just basing on your desired output, using $scope.selected as the ng-model array, as you can see i am mutating your $scope.selected to have a value of [{id:1, name:'opt1'},{id:2, name:'opt2'}] which are the complete object preselected value of ['opt1', 'opt2'].
$scope.list = [{id:0, name:'opt0'}, {id:1, name:'opt1'},{id:2, name:'opt2'}];
$scope.selected = ['opt1', 'opt2'];
$scope.selectModels = [];
var newSelected = [];
angular.forEach($scope.selected, function(value, key) {
this.push($filter("filter")($scope.list, {name: value})[0]);
}, newSelected);
$scope.selectModels = newSelected;
And you markup:
<tr ng-repeat="i in selected">
<td>
<select ng-model="selectModels[$index]" ng-options="option.name for option in list track by option.id" class="form-control"></select>
{{ selectModels[$index] }}
</td>
</tr>
I think your side question is possible if you generate a different list for each row, or use options-disabled for that row.
Here is working jsfiddle hope this helps. You can set a new question of your side request.
Does anyone know how to set up an initial default option in an Angularjs Select?
"myMapByCmd" below is a
LinkedHashMap<String, List<String>>
and so the "value" in item as item for item in value track by $index" is a List<String>.
If I put "Select value" first in the List from the back end, the selector initially shows/selects the last item in the list.
Man there must be a simple way to do this (Damn Angular is so fiddelly !)
<table>
<tr ng-repeat="(key,value) in myMapByCmd">
<td><label>{{key}} Title:</label></td>
<td>
<select name="my_val_sel"
ng-init="mycommand.myValue[$index] = value[0]"
ng-model="mycommand.myValue[$index]"
ng-options="item as item for item in value track by $index"
ng-change="changeMyValue()">
</select>
</td>
</tr>
</table>
if I do this it shows last and unselected...
<select name="my_val_sel" ng-model="mycommand.myValue[$index]"
ng-options="item as item for item in value track by $index"
ng-change="changeMyValue()">
<option value="" ng-selected="selected">FACK</option>
</select>
the myMapByCmd JSON looks like:
{
"ONE": [
"my-one",
"my-two",
"my-three"
]
}
Thanks!
Based on data its using, I have created demo here. If format of data is same and you are looking for similar result then there is no need to use track by $index.
HTML
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="(key,value) in myMapByCmd">
<td><label>{{key}} Title:</label></td>
<td>
<select name="my_val_sel"
ng-init="mycommand.myValue[$index] = value[0]"
ng-model="mycommand.myValue[$index]"
ng-options="item as item for item in value"
ng-change="changeMyValue()">
</select>
</td>
</tr>
</table>
</div>
JS
var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', function($scope) {
$scope.myMapByCmd = { "ONE": [ "my-one", "my-two", "my-three" ],
"TWO": [ "my-one", "my-two", "my-three" ],
"THREE": [ "my-one", "my-two", "my-three" ]}
}]);
Add an empty value options inside select element. JsFiddle
<select ng-options="...">
<option value="">Select Value</option>
</select>
As an example, this is what I use:
<select
ng-model="record.id"
ng-options="obj.id as obj.name for obj in page_list"
>
<option ng-show="record.id == 0"
value="">-- Choose Page --
</option>
</select>
JSFiddle
Future readers try this
<select ng-model="sel.myvar" ng-options="opt.label for opt in sel.myoptions">
<option value="">-- choose an option --</option>
</select>
For more details , please refer here.
Am using a drop down box in my form which lists items.
this is html code :
<tr>
<td><label>items</label></td>
<td>
<select ng-model="addItems.item" ng-options="item.name for item in itemList" ng-init="getItemsList()">
</select>
</td>
</tr>
this is my controller:
$scope.getItemsList = function() {
$http({
method : "GET" ,
url : "/items/allitems"
}).success(function(data) {
$scope.itemList = data;
$scope.additems.item = $scope.itemList[0].id;
});
};
Problem is :Am getting item's list from controller and binded those through ng-model. But i list item's name in drop down and if i select any then particular item's id will be sent to database for storing.
If i run this code i got the below result in browser :
<option value="?" selected="selected"></option>
<option value="0">pen</option>
<option value="1">notebook</option>
<option value="2">marker</option>
Can anyone please tel me whether i did any mistake and give me a tips to have 1st value as default one instead of empty selection
There might be one tip for ng-init label and I met this similar issue before.
You can use below html codes:
<tr>
<td><label>items</label></td>
<td ng-init="getItemsList()">
<select ng-model="addItems.item" ng-options="item.name for item in itemList">
</select>
</td>
</tr>
change your ng-options to
ng-options="item.id as item.name for item in itemList"
and your code should then work.
You can use dropdown option id or name assigning index to the model on dropdown init
as given below
<tr>
<td><label>items</label></td>
<td>
<select ng-model="addItems.item" ng-options="item.id as item.name for item in itemList" ng-init="addItems.item=itemList[0].id">
</select>
</td>
</tr>
I'm using select2 tool in my project using angularjs.
While assigning value to this select2 in a grid using angularjs in first row,
it is not assigning, but if I'm trying to assign in next to first row that is from 2nd row to next, it is working fine.
Why it is happening.?
Any suggestions regarding this is welcome.
Thanks in advance.
<td ng-if="configRow.validation.valueType == 'Single Choice'" style="width:26%">
<!-- <input style="width:100%" type="text" ng-model="configRow.Value" ui-select2="selectChoices" ng-blur="addToConfig()"> -->
<div class="print-blank" >
<select ui-select2 ng-model="configRow.Value" data-placeholder="Select One" ng-change="updatedDate($index)">
<option value=""></option>
<option ng-repeat="element in configRow.validation.list track by $index" value="{{element}}" >{{element}}</option>
</select>
</div>
</td>