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.
Related
how to Checked value from $index base. suppose in textboxStart Index and TextboxEnd . when user enter Start index 5 and End Index 10 , checkbox automatically checked, from 5 To 10 Index. please help me
<tr ng-repeat="item in MyList">
<td>{{$index}}</td>
<td>
<label class="mdl-checkbox mdl-js-checkbox" for="checkbox33">
<input autocomplete="off" ng-model="item.checked"
type="checkbox" id="checkbox33"
class="mdl-checkbox__input" unchecked>
{{CheckItems()}}
</label>
<td>{{item.Name}}</td>
<td>{{item.PilgrimID}}</td>
<td>{{item.GroupName}}</td>
<td>{{item.PassportNo}}</td>
<td>{{item.Gender}}</td>
<td>{{item.SubAgentName}}</td>
Use the ng-change directive to specify an update function:
<div>Input Start
<input ng-model="inputStart" ng-change="updateSelections(inputStart,inputEnd)" />
</div>
<div>Input End
<input ng-model="inputEnd" ng-change="updateSelections(inputStart,inputEnd)" />
</div>
Then update the selections:
$scope.updateSelections = function(iStart, iEnd) {
$scope.MyList.forEach((x,index)=>item.checked = (iStart<=index && index<=iEnd));
};
just push the selected values in an array , selectedItemIndexes like ng-checked="selectedItemIndexes.includes($index)"
https://stackblitz.com/edit/angularjs-snavdn
you can do it by adding one property like ItemIndex in your ItemList model,
and by putting input box with display none you can get index value in ItemList and can do what you want from javascript side,
<td><input type="text" style="display:none;" ng-model="item.ItemIndex"
ng-value="$index"/>{{$index}}
</td>
I have to update the value of multiple Inputs using ng-repeat. i usually get the value with JQuery $(class/id).val() and get its value. but now i have no idea how to access the input values since i only have one id for each. (i have like 20 input in the table)
View:
<tr ng-repeat="i in list">
<td><input list="itemNames" class="item_name" ng-model="i.item_name" value="{{i.item_name}}" type="text"/></td>
<datalist id="itemNames">
<option ng-repeat="ii in list" class="idI" ng-model="ii.idI" data-item="{{ii.idI}}" value="{{ii.item_name}} {{ii.idI}}">
</datalist>
<td><input class="quantity" ng-model="i.quantity" value="{{i.quantity}}" type="number"/></td>
<td><input class="price" ng-model="i.price" value="{{i.price}}" type="number"/></td>
<tr>
<td ng-click="updateAll()">UPDATE</td>
</tr>
</tr>
I expect to store all values in an arrays, but what i got is only values of the first row.
JS:
$scope.updateAll=function(){
// getting vallues
var item_name=$(".item_name").val();
var quantity=$(".quantity").val();
var price=$(".price").val();
}
I think your list is a scope variable. So, in controller its defined as $scope.list. You need not to think about id as you are using angular code, angular framework will do it for you.
As you used the two way data binding with ng-model, so any change to the bind variable will be immediately visible to controller and html view.
The use of ng-model ensures the immediate update to the $scope.list variable.
For example, if you add any text for "item_name" in the control index 0 from html view, the variable $scope.list[0].item_name will be automatically updated, also the change in $scope.list[0].item_name = "Some name" in controller will be automatically reflected in the view.
So, your given code can be re-written as following:
<tr ng-repeat="i in list">
<td><input list="itemNames_{{$index}}" class="item_name" id="txt_name_{{$index}}" ng-model="selectedValue" ng-change = "getSelectedId(selectedValue, $index)" type="text"/></td>
<datalist id="itemNames_{{$index}}">
<option ng-repeat="ii in list" class="idI" ng-model="ii.idI" data-item="{{ii.idI}}" value="{{ii.item_name}} {{ii.idI}}">
</datalist>
<td><input class="quantity" ng-model="i.quantity" value="{{i.quantity}}" type="number"/></td>
<td><input class="price" ng-model="i.price" value="{{i.price}}" type="number"/></td>
<tr>
<td ng-click="updateAll()">UPDATE</td>
</tr>
The javascript method can be written as:
var getSelectedId = function(selectedValue, index) {
var val = document.getElementById('txt_name_' + index).value;
var text = $('#itemNames_' + index).find('option[value="' + val + '"]').attr('data-item');
alert(text);
}
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.
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>