I want to pass two values in select dropdown.
Here is my code.
<tbody>
<tr ng-repeat="x in studyTeamObj" align="center">
<td>
<select class="form-control" ng-model="x.Designation">
<option value=""></option>
<option ng-repeat="x in createStudyObj.Study_User"
value="{{x.Designation}}">{{x.Emp_Name}}
</option>
</select>
</td>
<td>
{{x.Emp_Id}}
</td>
<td>
{{x.Designation}}
</td>
<td class="mdrf-add-row-col">
<i class="fa fa-minus-circle"
data-ng-click="deleteMem($index)"></i>
</td>
</tr>
</tbody>
This is what the data I am getting from {{createStudyObj.Study_User}}
[{"Emp_Name":"mdrf","Emp_Id":2,"Designation":"Research Dietitian","DesignationID":20},{"Emp_Name":"Sudha","Emp_Id":1045,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1046,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1047,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1048,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1049,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"fdgedd","Emp_Id":1050,"Designation":"MDRF HOD","DesignationID":16}]
when I click on emp name from the dropdown,it should fetch Emp_Id and Designation.But I am getting only the Designation.Plz help
Assign object to value instead of one property. That's way whole object bind to ng-model and you can filter relevant properties from that.
<option ng-repeat="x in createStudyObj.Study_User"value="{{x}}">{{x.Emp_Name}}
</option>
The downfall of this is when u access the model variable from the controller value assign as string. so you need to parse the value to object using JSON.parse()
$scope.designation = JSON.parse($scope.designation)
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.createStudyObj = {};
$scope.createStudyObj.Study_User = [{"Emp_Name":"mdrf","Emp_Id":2,"Designation":"Research Dietitian","DesignationID":20},{"Emp_Name":"Sudha","Emp_Id":1045,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1046,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1047,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1048,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1049,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"fdgedd","Emp_Id":1050,"Designation":"MDRF HOD","DesignationID":16}]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<table>
<tbody>
<tr >
<td>
<select class="form-control" ng-model="designation">
<option value=""></option>
<option ng-repeat="x in createStudyObj.Study_User"
value="{{x}}">{{x.Emp_Name}}
</option>
</select>
</td>
<td>
{{designation}}
</td>
<td class="mdrf-add-row-col">
<i class="fa fa-minus-circle"
data-ng-click="deleteMem($index)"></i>
</td>
</tr>
</tbody>
</table>
</div>
But I recommend to use ng-options instead of the ng-repeat
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.createStudyObj = {};
$scope.createStudyObj.Study_User = [{"Emp_Name":"mdrf","Emp_Id":2,"Designation":"Research Dietitian","DesignationID":20},{"Emp_Name":"Sudha","Emp_Id":1045,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1046,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1047,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1048,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1049,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"fdgedd","Emp_Id":1050,"Designation":"MDRF HOD","DesignationID":16}]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<table>
<tbody>
<tr >
<td>
<select class="form-control" ng-model="designation" ng-options="item as item.Emp_Name for item in createStudyObj.Study_User">
<option value=""></option>
</select>
</td>
<td>
{{designation}}
</td>
<td class="mdrf-add-row-col">
<i class="fa fa-minus-circle"
data-ng-click="deleteMem($index)"></i>
</td>
</tr>
</tbody>
</table>
</div>
You should be using ng-options instead of building your own options list. https://docs.angularjs.org/api/ng/directive/ngOptions
If you have problems with that, add those questions up top and I will update my answer.
Related
Data display in table form. and i want to get siblings input value on dropdown onchange.
<tr ng-repeat="x in record">
<td>{{x.company }}</td>
<td>{{x.contact}}</td>
<td>
<input type='hidden' value="{{x.id}}">
<select name='status' >
<option value='1'>Active</option>
<option value='0'>Inactive</option>
</select>
</td>
</tr>
How can we get it.
angular.module('app', []).controller('ctrl', function($scope) {
$scope.record = [
{ company: 'Comp1', contact: 'Cont1', id: 1 },
{ company: 'Comp2', contact: 'Cont2', id: 2 }
]
$scope.process = function(input) {
console.log(input);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<table ng-app='app' ng-controller='ctrl'>
<tbody>
<tr ng-repeat="x in record">
<td>{{x.company }}</td>
<td>{{x.contact}}</td>
<td>
<input type='hidden' ng-model='x.id' />
<select name='status' ng-model='x.active' ng-change='process(x.id)'>
<option value='1'>Active</option>
<option value='0'>Inactive</option>
</select>
</td>
</tr>
</tbody>
</table>
I just tryout to project answer over your question. This might some different because of little description. So provide more code detail if this will not get work for you.
HTML
<tr ng-repeat="x in record">
<td>{{x.company }}</td>
<td>{{x.contact}}</td>
<td>
<input type='hidden' value="{{x.id}}" ng-model="hdnInput">
<select name='status' ng-model="status" ng-change="callMe($index)">
<option value='1'>Active</option>
<option value='0'>Inactive</option>
</select>
</td>
</tr>
Controller
$scope.callMe = function(index){
console.log(this.hdnInput[index]);
}
I want to track the expanded row and save that form with city and work details, the problem is while clicking on the particular row it's expanding with form but I can't able to track that row...
var app = angular.module('app', ['ngAnimate']);
app.controller('itemsController', function( $scope ) {
$scope.divisions = [{id:12, div_name:' city1'},
{id:13, div_name:' city2'},
{id:14, div_name:' city3'}];
$scope.works =[{wid:111, w_name:'work1'},
{wid:222, w_name:'work2'},
{wid:333, w_name:'work3'}];
});
html
<div ng-controller="itemsController" class="box">
<table border="1">
<tbody ng-repeat-start="division in divisions">
<td>
{{division.div_name}}
<em>{{expanded}}</em>
</td>
<td>Values: {{divisions.length}}</td>
<td>
<button type="button" ng-click="expanded = !expanded">
Expand
</button>
</td>
</tbody>
<tbody ng-repeat-end ng-show="expanded">
<td colspan="3">
<select ng-model="result.division.tt">
<option value='01'>tt1..........</option>
<option value='02'>tt2..........</option>
</select><br/><br/>
<ul ng-repeat="work in works">
{{work.w_name}} <input type=text />
</ul><br/><br/>
<button ng-click="save()">save</button>
</td>
</tbody>
</table>{{result |json}}
link - http://jsfiddle.net/raju10281/eqk6attx/18/
Thank You in advance!!!
Try this solution. You should create object(ng-init='data={}') for each ng-repeat. It will present content of each form, then you can use it inside your controller(ng-click="save(division, data)") with appropriate division:
<tbody ng-repeat-end ng-show="expanded" ng-init='data={id:division.id,div_name:division.div_name,works:[]}'>
<td colspan="3">
<select ng-model="data.tt">
<option value='01'>tt1..........</option>
<option value='02'>tt2..........</option>
</select><br/><br/>
<ul ng-repeat="work in works" ng-init='data.works[$index]={wid:work.wid,w_name:work.w_name}'>
{{work.w_name}} <input type=text ng-model='data.works[$index].input' />
</ul><br/><br/>
<button ng-click="save(division, data)">save</button>
</td>
</tbody>
On the drop down change i am trying to capture the selected value .
This is my code
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="FirstCtrl">
<table border="1">
<tr>
<th ng-repeat="(key, val) in collectioninfo[0]">
<span ng-if="allDropDownsHere.indexOf(key)>=0">
<select ng-change="getchange()" >
<option>{{key}}</option>
<option ng-repeat="(k, v) in val[0]" value="{{v}}">{{k}}</option>
</select>
</span>
<span ng-if="allDropDownsHere.indexOf(key)<0">
{{ key }}
</span>
</th>
</tr>
<tr ng-repeat="row in collectioninfo">
<td ng-repeat="(key2, val2) in row">
<span ng-if="allDropDownsHere.indexOf(key2)>=0">
{{ getFirstKeyOfDropDown(val2) }}
</span>
<span ng-if="allDropDownsHere.indexOf(key2)<0">
{{ val2 }}
</span>
</td>
</tr>
</table>
</div>
When i kept ng-change="getchange()" , it is expecting ng-model and ng-model leads to empty headers
This is my fiddle
http://jsfiddle.net/sD7X9/28/
Could you please let me know how to get the selected value ??
first thing is you can't use ng-change without ng-model. In order keep the select box value and avoid empty header, you can assign a value to ng-model using ng-init
<select ng-change="getchange(selectItem)" ng-model="selectItem" ng-init="selectItem = key">
<option>{{key}}</option>
<option ng-repeat="(k, v) in val[0]" value="{{v}}">{{k}}</option>
</select>
Demo
Your <select> doesn't have an ng-model which is required (you'd knew had you seen your console errors).
<select ng-change="getchange(dropdownvalue)" ng-model="dropdownvalue">
<option ng-selected="true">{{key}}</option>
<option ng-repeat="(k, v) in val[0]" value="{{v}}">{{k}}</option>
</select>
And, in controller,
$scope.getchange = function(value) {
alert(value)
}
working fiddle
I'm trying to set the correct select option based on a value in the ng-repeat.
See example here: https://jsfiddle.net/vok080z4/5/
Crazy, if you view the example, why is dave set to apples, but no one else is?
<body ng-app="eApp">
<div ng-controller="splitsController" ng-cloak>
<table class="widefat fixed" cellspacing="0">
<thead class="thead">
<tr>
<th>Name</th>
<th>Fruit</th>
</tr>
</thead>
<tbody class="tbody">
<tr ng-repeat="order in data.orders" ng-class-odd="'alternate'">
<td>{{order.name}}</td>
<td>
<select ng-model="fruitSelect">
<option value="">-- Select One --</option>
<option ng-repeat="fruit in data.fruits track by fruit.id" value="{{fruit.id}}" ng-selected="fruit.id === order.fruitId">
{{fruit.name}}
</option>
</select>
</td>
<td>
</tr>
</tbody>
</table>
</div>
</body>
You should use ngOptions to generate select options and more important use ngModel to persist the selected value.
<select ng-model="order.fruitId" ng-options="item.id as item.name for item in data.fruits">
<option value="">-- Select One --</option>
</select>
DEMO
I need to skip the ng-repeat for particular column.
My Code:
<tr ng-repeat="(lunches,price) in lunchTwo">
<td>
<label class="label_wraptext">{{lunches}}</label>
</td>
<td class="td_width">
</td>
<td>
<label>{{price}}</label>
</td>
<td style="padding-left:190px">
</td>
<td>
<select ng-controller="Quantity">
<option ng-repeat="key in notSorted(data)" ng-init="value = data[key]">
{{key}}
</option>
</select>
</td>
</tr>
I need to avoid binding the 'Select' control for all the rows.
Thanks in Advance,
Stephen.L
Suppose if you want to show the select control only for the first row, you can give a check using the index if it is equals ZERO, then show the select box, else not.
Please find the updated code below, check if it works for you.
<tr ng-repeat="(lunches,price) in lunchTwo">
<td>
<label class="label_wraptext">{{lunches}}</label>
</td>
<td class="td_width">
</td>
<td>
<label>{{price}}</label>
</td>
<td style="padding-left:190px">
</td>
<td>
<select ng-controller="Quantity" ng-show="$index==0">
<option ng-repeat="key in notSorted(data)" ng-init="value = data[key]">
{{key}}
</option>
</select>
</td>
</tr>