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>
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 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 = "";
Can any one help how to get input and selected values by dynamically added with angularjs?
Here is my code in Plunkr
When I select vegtables, another input shows with some values. when I click submit button I need a json like
{
"itemName":"Mango",
"itemType":"fruits"
},
{
"itemName":"Carrot",
"itemType":"vegtables",
"iteminfo":"you selected Carrot"
},
{
"itemName":"Apple",
"itemType":"fruits"
}
I forked your plunker
You can bind itemInfo to an item object using ng-model. Rather than placing the text in a value attribute I just initialized the model value using ng-init.
<tr ng-repeat="item in Items">
<td>
<input type="text" ng-model="item.itemName">
</td>
<td>
<select ng-model="item.itemType">
<option value="">--Select--</option>
<option vaue="fruits">Fruits</option>
<option value="vegtables">Vegtables</option>
</select>
</td>
<td>
<div ng-switch on="item.itemType">
<input type="text" ng-model="item.itemInfo" ng-switch-when="vegtables" ng-init="item.itemInfo='you selected '+ item.itemName">
</div>
</td>
</tr>
Also I had to change the Items array to match your requested naming:
$scope.Items = [{itemName: "Mango"}, {itemName: "Carrot"}, {itemName: "Apple"}];
You can parse the JSON object in a for loop to get the selected value and add the new key value pair.
angular.forEach($scope.vegetables, function(value, key){
if(value.itemName== 'Carrot')
value.iteminfo = 'you selected Carrot';
});
I guess you might be looking for something like this, if I am not wrong.
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.