I get proper and name values for checkbox by parent ng repeat. Problem is, when checked check box I need to push id and name values in one array. Also if uncheck remove that id and name values.
<tr ng-repeat="user in partyList | filter:{ 'partyRole': 4}:true | filter:searchUsers | mySlice:start:end">
<td>
<input type="checkbox" class="tableBox" value="{{user.partyId}}" name="{{user.first_name}}" ng-checked="userBox" ng-model="userModel" ng-change="getIndex(user.partyId,user.first_name,userModel)" />
</td>
<td>{{user.first_name}}</td>
<td>{{user.email}}</td>
<td>{{user.phone_number}}</td>
</tr>
Related
I use a ngRepeat with a checkbox and need when I check each item compute the value total of selected items as below:
HTML:
<tr ng-repeat="ciclo in ciclos">
<td><input id="idCiclo" type="checkbox" ng-click="computeTotal(ciclo)">
</td>
<td>{{ciclo.Quantity}}</td>
<td>{{ciclo.Value | currency}}</td>
...
<tfoot>
<tr>
...
<td>{{TotalQuantity}}</td>...
Controller:
$scope.computeTotal = function (ciclo) {
$scope.TotalQuantity += ciclo.Quantity; //Here I need Add or Subtract a value
};
You should have a property that indicates whether a checkbox has been checked or unchecked so that you can decide to add or subtract.
You would be using ngModel with ngChange (ngClick is usually better for elements that don't have built-in click expectations/behaviors).
Example:
View:
<tr ng-repeat="ciclo in ciclos">
<td>
<input class="ciclo" type="checkbox" ng-model="ciclo.checked" ng-change="computeTotal(ciclo)">
<!-- Note that I took out the ID. IDs should never be used in ngRepeat,
as it heavily risks multiple elements having the same ID,
which should ALWAYS be unique.
A class works much better for collections like this. -->
</td>
<td>{{ciclo.Quantity}}</td>
<td>{{ciclo.Value | currency}}</td>
</tr>
Controller:
$scope.computeTotal = function (ciclo) {
if(ciclo.checked)
$scope.TotalQuantity += ciclo.Quantity;
else
$scope.TotalQuantity -= ciclo.Quantity;
};
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 table that is populated with ngRepeat and I have a input[text] where you can filter the table.
This works fine but now I came up with the idea to have the possibility to double-click on an element in the table and add the text to the search input[text] so the filter is applied straight when you double-click on the text.
Unfortunately it does not work as expected.
I have done this:
<input type="text" placeholder="Search..." data-ng-model="userinput" />
<p data-ng-dblclick="userinput='query'">Double click to use query to search</p>
And in the ngRepeat I use the ng-model "userinput" to filter but the value of the text input is not changing.
I also tried to specify the model "userinput" as variable in the controller and then change it per function but it is not working.
Is there something I'm missing?
Normally I would change the variable in the controller and it should automatically change the text input since it uses this variable as model. Then with this it should change the filter too but nothing happens.
WORKING
Code ngRepeat
<tr data-ng-repeat="dat in data | filter: userInput | filter: tsSelect | filter: advSelect | filter: checkedFilter | orderBy: ['client', 'ssrstatus'] | limitTo: totalDisplay" id="{{ dat.bannerid }}"> <!-- | unique: 'bannerid' | filter: errorSelect| -->
<td>
<input type="checkbox" id="checked" data-ng-model="dat.checked" data-ng-change="updateCheckedStatus(dat._id['$id'], dat.checked)">
<label for="checked">Checked</label>
</td>
<td data-ng-dblclick="search(dat.clientid)">{{ dat.clientid }}</td>
<td data-ng-dblclick="search(dat.client)" class="txtleft">{{ dat.client }}</td>
<td data-ng-dblclick="search(dat.tsengineer)">{{ dat.tsengineer }}</td>
<td data-ng-dblclick="search(dat.bannerid)">{{ dat.bannerid }}</td>
<td data-ng-dblclick="search(dat.bannertype)" class="txtleft">{{ dat.bannertype }}</td>
<td data-ng-dblclick="search(dat.width + 'x' + dat.height)">{{ dat.width == 0 ? 0 : dat.width - 50 }}x{{ dat.height == 0 ? 0 : dat.height - 50 }}</td>
<td data-ng-dblclick="search(dat.ssrstatus)" class="txtleft">{{ dat.ssrstatus }}</td>
<td data-ng-dblclick="search(dat.datebegin)">{{ dat.datebegin }}</td>
<td data-ng-dblclick="search(dat.dateupdated)">{{ dat.dateupdated }}</td>
<td>
<button class="preview {{ dat.bannerid }}" data-ng-click="showPreview(dat.bannerid, dat.clicktotestbanner, dat.width, dat.height)"></button>
</td>
<!-- <td id="{{ dat.bannerid }}" class="banner-preview"></td> -->
Controller
$scope.userInput = "";
$scope.search = function(query){
$scope.userInput = query;
}
I think it's because of your userinput='query' evaluated inside ng-repeat.
Let's name your outer scope "scopeA". The ng-model="userinput" of the search input would be referencing scopeA.userinput.
As we know, a new scope is created for every ng-repeat items. If you run userinput='query' in one of these scopes (name it scopeB), you would be assigning 'query' to scopeB.userinput instead of scopeA.userinput.
In this situation, scopeB is likely to be a child of scopeA. If you use angular-batarang Chrome extension to have a look at the scope tree, you would find both scopes to have userinput field.
One solution would be to use a function to assigning value to userinput instead of ng-dblclick expression. Like:
<p data-ng-dblclick="setUserinput('query')">Double click to use query to search</p>
And add a function setUserinput to your scope:
$scope.setUserinput = function(newValue) {
$scope.userinput = newValue;
}
I want to ask you if you can help me to dynamiclly attribute ng-model name to an input radio in HTML table, using ng-repeat,
this my code
<tbody>
<tr ng-if="$index>0" ng-repeat="row in resultatfinal">
<td ng-repeat="k in [] | range:collumnLength">{{ row [$index] }}</td>
<td ng-repeat="i in [] | range:3"><input type="radio" ng-model="i" value="i" /> </td>
</tr>
</tbody>
i would like to attribut name like
inputradio11 for the firt radio input in the first row
inputradio12 for the firt radio input in the first row
inputradio13 for the firt radio input in the first row
inputradio21 for the firt radio input in the second row
thank you
this is the solution, i have juste used the id of the parent with $parent.$index to the indice of row, column indice i have the i var
<tbody>
<tr ng-if="$index>0" ng-repeat="row in resultatfinal">
<td ng-repeat="k in [] | range:collumnLength">{{ row [$index] }}</td>
<td ng-repeat="i in [] | range:3"><input type="radio" name="{{$parent.$index}}{{i}}" value="{{i}}" /></td>
</tr>
</tbody>
I just started with AngularJS and I'm trying to make a users table that shows the users for the application and the roles they are in (e.g. Admin, Editor, Anon) with checkboxes to take the users in and out of roles.
<tbody>
<tr data-ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
<td class="table-item-title"><a title="{{item.UserName}}" href="" ng-click="loadEditForm(item.UserName)">{{item.UserName}}</a></td>
<td class="hmax479">{{item.Email}}</td>
<td align="center" data-ng-repeat="role in roles" style="align:center;">
<input type="checkbox" data-ng-model="role.IsChecked" style="align:center;"/>
</td>
</tr>
</tbody
With the above code it updates the checkboxes for the entire group based on the last user that was clicked rather than for a single user. Is there any way I can change this code with something like a "user in users" ng-repeat to change this or do I need to add a new function in the controller?
Each user could have an array of roles to show the roles that has been assigned to the user. For each user, while looping through the roles, you use a filter to only check assigned roles. You could use a function in your controller to add/remove roles as the check boxes are selected/deselected.
<tbody>
<tr data-ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
<td class="table-item-title"><a title="{{item.UserName}}" href="" ng-click="loadEditForm(item.UserName)">{{item.UserName}}</a></td>
<td class="hmax479">{{item.Email}}</td>
<td align="center" data-ng-repeat="role in roles" style="align:center;">
<input type="checkbox" data-ng-checked="role | hasRole:item.Roles" data-ng-click="addOrRemove($parent.$index, role)" style="align:center;"/>
</td>
</tr>
</tbody>
The filter
app.filter('hasRole', function() {
return function (role, userRoles) {
var result = false;
userRoles.forEach(function(value, index) { // loop through the roles
// return true if the user has the role
if(role.Name == value.Name) // This is replaced by any method of comparing roles
result = true;
});
return result;
}
}
In your controller, you implement addOrRemove()