I have a table which is populated with directive ngRepeat, and within each item is ngOptions. On change I call function transactionListFilter in the controller to find out which select has changed, so I can then reset all other select to default value 'Multiple'.
View
<tr data-ng-repeat="item in $ctrl.tableData">
<td>
<select
data-ng-options="item.appAndType for item in item.serviceUIs"
data-ng-model="selectedItem"
data-ng-change="$ctrl.transactionListFilter(selectedItem)" >
<option value="">Multiple</option>
</select>
</td>
</tr>
Controller
function transactionListFilter(data) {
console.log(data)
$scope.filter = data;
};
So it should look like this:
But if I select the second select, the first select stll is populated with an application number, rather than resetting to 'Multiple'. When I submit ngModel value, it submits the data form the ngOptions.
Question
How do I identify the selected select from the controller, so I can reset all other select value to 'Multiple'?
One approach is to make the selection a property of the ng-repeat iterator:
<tr data-ng-repeat="item in $ctrl.tableData">
<td>
<select data-ng-options="ui.appAndType for ui in item.serviceUIs"
data-ng-model="item.selectedUi"
data-ng-change="$ctrl.transactionListFilter(item,$index)" >
<option value="">Multiple</option>
</select>
</td>
</tr>
function transactionListFilter(item, index) {
$ctrl.tableData.forEach( (_ , idx) => {
if (index != idx) {
_.selectedUi = null;
};
});
console.log(item.selectedUi, index)
};
I believe you can use $index in the directive. I've had success with using it in ng-repeat with forms. Here is a related article.
<form name="formName" class="form-horizontal">
<tr ng-repeat="notify in $ctrl.Channel.notify">
<td>{{notify.severity}}</td>
<td><input type="Text" name="name{{$index}}" ng-model="notify.name" ng-maxlength="16">
<div ng-show="formName['name' + $index].$dirty" ng-messages="formName['name' + $index].$error" style="color:maroon" role="alert">
<div ng-messages-include src="formNameErrorMessages"> </div>
</div>
</td>
</tr>
</form
In your case it might be something like this:
<tr data-ng-repeat="item in $ctrl.tableData">
<td>
<select name="select{{$index}}"
data-ng-options="item.appAndType for item in item.serviceUIs"
data-ng-model="selectedItem"
data-ng-change="$ctrl.transactionListFilter(selectedItem)" >
<option value="">Multiple</option>
</select>
</td>
$scope.formName['select' + $index].$dirty;
Related
I am using jQuery dynamic table inputs in my form.Whenever i select country,i get the value from select box.But when i increase dynamic button (+) and again select the country from select box from another input field.i get same value of country from first selectbox field
<table class="dynamic-fields-table">
<thead>
<tr>
<th >Country</th>
<th >City</th>
<th></th>
</tr>
</thead>
<tbody data-role="dynamic-fields">
<tr class="form-inline">
<td>
<select name="country[]" class="form-control">
<option value="1">USA</option>
<option value="2">Russia</option>
<option value="3">Japan</option>
</select>
</td>
<td>
<input type="text" name="city[]" class="form-control">
</td>
<td>
button data-role="add">Add</button>- // button for increasing or decreasing input
</td>
</tr>
</tbody>
</table>
In script file.When I select country at first it will come value right in console.but when i increase input form then i select again another country then value of country will give same as first time selected.So how should i give value of country i selected everytime i increase dynamically input button
$(document).on(
'click',
'[data-role="dynamic-fields"],
function(e) {
e.preventDefault();
var container = $(this).closest('[data-role="dynamic-fields"]');
new_field_group = container.children().filter('.form-inline:first- child').clone();
new_field_group.find('input').each(function(){
$(this).val('');
});
container.append(new_field_group);
updatecity()
}
);
$(document).on('change', " select[name='country[]']", function(){
updatecity();
});
function updatecity(){
$country = $(" select[name='country[]']").val();
console.log($country)
}
Currently, updatecity always gives you the value of the first result of $(" select[name='country[]']"). While the values of the other dropdown lists are ignored.
function updatecity(){
$country = $("select[name='country[]']").val();
console.log($country)
}
To make each dropdown list's call to updatecity behave with respect to its own value, you can add a parameter to updatecity to tell which country to update.
function updatecity($target){
$country = $target.val();
console.log($country);
}
Having the function signature changed, you will also need to update places where you call updatecity
$(document).on(
'click',
'[data-role="add"]',
function(e) {
// ...
updatecity($("select[name='country[]']"))
});
$(document).on('change', "select[name='country[]']", function(e){
updatecity($(this));
});
Also, the code you're showing will insert a new inline-form whenever <tbody> is clicked, so I changed the selector from [data-role="dynamic-fields"] to [data-role="add"]
As a sidenote, I notice that updatecity doesn't actually do anything except logging a value. You might want to have its behavior match its name.
Below I've attached a code snippet for demonstration.
$(document).on(
'click',
'[data-role="add"]',
function(e) {
e.preventDefault();
var container = $(this).closest('[data-role="dynamic-fields"]');
new_field_group = container.children().filter('.form-inline:first-child').clone();
new_field_group.find('input').each(function(){
$(this).val('');
});
container.append(new_field_group);
updatecity($("select[name='country[]']"))
}
);
$(document).on('change', "select[name='country[]']", function(e){
updatecity($(this));
});
function updatecity($target){
$country = $target.val();
console.log($country)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table class="dynamic-fields-table">
<thead>
<tr>
<th >Country</th>
<th >City</th>
<th></th>
</tr>
</thead>
<tbody data-role="dynamic-fields">
<tr class="form-inline">
<td>
<select name="country[]" class="form-control">
<option value="1">USA</option>
<option value="2">Russia</option>
<option value="3">Japan</option>
</select>
</td>
<td>
<input type="text" name="city[]" class="form-control">
</td>
<td>
<button data-role="add">Add</button><!-- button for increasing or decreasing input-->
</td>
</tr>
</tbody>
</table>
i want to replace table cell value with a dropdownlist when i click on tablecell in angularjs.
so if i click 7114 it should change to a dropdownlist containing all VDN numbers
HTML table:
<table class="table table-striped">
<tbody>
<tr ng-repeat="(key, value) in responseData | groupBy: 'NameEn'">
<td>{{key}}</td>
<td>
<table class="table table-bordered">
<tr ng-repeat="responses in value">
<td>{{responses.vdnlanguage}}</td>
<td ng-click="editVDN()">
{{responses.vdnnum}}
</td>
<td>{{responses.vdnname}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
AngularJs
$scope.editVDN = function () {
alert("populate dropdownlist");
}
Dropdownlist will be populated using response from an api. if anyone can help i will be very thankful.
Change {{responses.vdnnum}} to <div ng-bind-html="responses.vdnnum"></div>
responses.vdnnum should have the html string constructed.
Something like $scope.responses.vdnnum = '<select><option>First</option></select>';
The code should like this finally alongwith ng-bind-html:
$scope.editVdn = function () {
$scope.responses.vdnnum = '<select><option>First</option></select>
};
So i found a solution i thought it might be helpful for someone else. following is the code which i have coded to resolve the issue.
<td ng-click="mode = 'edit'">
<span ng-show="mode == edit">{{responses.vdnnum}}</span>
<select ng-show="mode != edit" ng-options="option.vdnname for option in responseData track by option.id"
ng-model="selectedOption" ng-change="selectedItemChanged(selectedOption)" class="form-control selcls" style="width:250px;">
<option value="" disabled selected>--Select--</option>
</select>
</td>
I have a dropdown with four options. I select the first option as 'John (1)' and add a row. Now the next dropdown should only show me three options in the dropdown ie, it should exclude the value of the previous dropdown selected value which is 'John (1)'. On the next add row it should exclude the previous two selected dropdown values. Can this be achieved. Thank you in advance. Below is the fiddle.
<div ng-app ng-controller="LoginController">
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="mapping in viewTemplateRow">
<td>
<select class="form-dropdown" id="templateId" ng-model="mapping.id">
<option value="">Please Select...</option>
<option ng-repeat="option in viewTemplateData" value="{{option.id}}" ng-selected="{{option.id == mapping.id}}" ng-model="viewTemplateData">{{option.name}} ( {{option.id}} )</option>
</select>
</td>
</tr>
</tbody>
</table>
<button type="button" class="button button-compact" ng-click="addRow();">Add New Row</button>
</div>
https://jsfiddle.net/Lt7aP/3787/
Add a filter to your ng-repeat in order to avoid allready added objects:
$scope.notSelected = function(item){
for (var i in $scope.viewTemplateRow){
if ($scope.viewTemplateRow[i].id==item.id)
return false
}
return true;
}
Your html will look like this:
<option ng-repeat="option in viewTemplateData | filter: notSelected" value="{{option.id}}" ng-selected="{{option.id == mapping.id}}" ng-model="viewTemplateData">{{option.name}} ( {{option.id}} )</option>
Note: Consider replace ng-repeat directive for ng-options for a selector item.
after spending a lot of time on this simple issue and having made a lot of research, I was wondering if someone could give me some help.
I have data which is generated inside of a table like so:
<tbody>
<tr class="odd gradeX" ng-repeat="user in ctrl.datas | orderBy:ctrl.sortType:ctrl.sortTypeReverse">
<td>
<input type="checkbox" class="checkboxes" value="{{user.id}}" ng-click="ctrl.addItem(user)"/>
</td>
<td>
{{user.given_name}}
</td>
<td>
{{user.family_name}}
</td>
<td>
{{user.email}}
</td>
<td class="center" ng-bind-html="ctrl.convertToDate(user.created_at) | date: 'dd-MMMM-yyyy hh:mm'"></td>
<td>
<span class="btn blue-hoki"> Details </span>
</td>
</tr>
</tbody>
Above is a container where I get the items selected via a checkbox, add the in an array and give the user the ability to delete the selected item:
<tr ng-repeat="user in ctrl.checkedObject track by $index" ng-show="user.id">
<td>{{user.family_name}}</td>
<td>{{user.given_name}}</td>
<td>
<button class="btn blue" ng-click="ctrl.removeItem($index)">Unselect</button>
</td>
</tr>
In my controller, here are the two functions used to do so:
this.checkedObject = [];
//Add selected user
this.addItem = function (user) {
self.checkedObject.push(user);
};
this.removeItem = function(obj){
delete self.checkedObject[obj];
};
What i'd like to achieve is to uncheck the corresponding checkbox if a user changes his selection.
The thing is, I have no idea how to target the corresponding checkbox. Does anyone have a clue?
Thanks in advance
Try ng-checked like:
<input type="checkbox" ng-checked="user !== null" class="checkboxes" value="{{user.id}}" ng-click="ctrl.addItem(user)"/>
And set the item (user) to null on button click (inside removeItem() ) or a other variable.
I set up a simple plunker to show one approach, which would be to assign a selected property to each user when his/her checkbox is checked, and set an ng-checked attribute on the checkbox corresponding to user.selected (so will be unchecked when false).
Using this approach you won't need to push and delete from the array of checkedUsers, you can just filter all the users by whether they are selected or not.
function getSelected() {
ctrl.checkedObject = _.filter(ctrl.datas, {selected: true});
}
ctrl.selectUser = function (user) {
user.selected = true;
getSelected();
};
ctrl.removeUser = function(user){
user.selected = false;
getSelected();
};
I have a weird problem with dynamic binding of model in Angular JS.
<tr ng-repeat="i in [].constructor( 5 ) track by $index">
<td ng-repeat="column in columns">
<input type="text" ng-model="column.defaults[i]" class="form-control">
</td>
</tr>
I define columns using:
$scope.addColumn = function() {
if(!$scope.field_column_name) return;
if(!$scope.columns) {
$scope.columns = []
}
$scope.columns.push( {
name: $scope.field_column_name,
defaults: $scope.field_column_defaults
});
$scope.field_column_name = $scope.field_column_default = undefined;
};
My goal is create inputs for all of it to store data added by user. The problem is, because all inputs looks like if they were the same model (value added in one of them shows also in other inputs). Why?
JSFiddle: http://jsfiddle.net/tz6fsz1o/5/
I think it should be like this:
<tr ng-repeat="i in [].constructor(5)" ng-init="outerIndex = $index">
<td ng-repeat="column in columns">
<input type="text" ng-model="columns[$index].defaults[outerIndex]" class="form-control">
</td>
</tr>
Note how you need to store outer loop $index into helper variable in order to access it in inner loop.
Demo: http://jsfiddle.net/tz6fsz1o/7/
You have mistake in creating rows_array
Try http://jsfiddle.net/tz6fsz1o/6/
$scope.$watch('rows', function(){
$scope.rows_array = [];
for(var i=0;i<$scope.rows;i++){
$scope.rows_array.push(i);
}
}, true);
You are binding each field on ng-model="column.defaults[i]", it means that each field present in the columns array will be binded on the same model property... ex: both column.foo and column.bar bind to columnt.default[i]...
You can fix it binding the text field on the column variable, for example:
<td ng-repeat="column in columns">
<input type="text" ng-model="column.foo" class="form-control">
</td>