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>
Related
I am totally new to Knockout JS.I am having a table in which one column is input type checkbox.
at the end of html table I have one button as "Add".
Now what I want to do is on click of "Add" button I should be able to get all the rows in which checkboxes are checked.
HTML
<table>
<thead>
<tr>
<th>Add Data</th>
</tr>
</thead>
<tbody data-bind="foreach: SearchResult">
<tr>
<td data-bind="text: Name"></td>
<td><input type="checkbox" class="" data-bind="checked: selectedArray"/></td>
</tr>
</tbody>
<tfoot>
<tr>
<td><button type="button" id="addButton" data-bind="click: AddSelection">Add</button></td>
</tr>
</tfoot>
</table>
Now can anybody tell me how can I get all the rows in which checkbox column is checked.
I have gone through this but this didn't work for me.
send information from multiple checkbox to array Knockout js
fiddle for reference
http://jsfiddle.net/smsharma/u9ts4uvf/
Here's the updated fiddle: http://jsfiddle.net/u9ts4uvf/1/
You can create an addItem function, that creates a new item, and adds it to the array availableItems:
self.addItem = function() {
var item = new BookItem(1, 'Lorem Ipsum', '$0.99');
item.Selected(true);
self.availableItems.push(item);
};
But you also need to add a checked binding to the checkboxes to ensure that they are checked when Selected is set to true for BookItem:
<input type="checkbox" data-bind="value: id(), click: $root.toggleAssociation, checked: Selected" />
I'm trying to teach myself AngularJS, and I've been staring at this piece of code for so long, my eyes are starting to cross.
I have a JSON file of cats containing the properties name, sex, color, pattern, and picture for each cat object. (sex in this case is a Boolean; 0 for female and 1 for male. This will come back up soon.)
I use the following code to loop through the JSON file and print out a table of all cat objects, and it works correctly (and even pretties up the formatting a bit):
<table>
<tr>
<th>Name</th>
<th>Sex</th>
<th>Color</th>
<th>Pattern</th>
<th>Picture</th>
</tr>
<tr ng-repeat="kitty in cats">
<td>{{kitty.name|capitalize}}</td>
<td ng-if="kitty.sex == 0">Female</td>
<td ng-if="kitty.sex == 1">Male</td>
<td>{{kitty.color|capitalize}}</td>
<td>{{kitty.pattern|capitalize}}</td>
<td ng-if="kitty.picture"><img ng-src="{{kitty.picture}}" alt="{{kitty.name|capitalize}}"></td>
<td ng-if="!kitty.picture">NO IMAGE</td>
</tr>
</table>
What I would like now is to allow a user to click a checkbox, e.g. "Male", and have the view change to display all cat objects where sex is 1. I can achieve this by replacing:
<tr ng-repeat="kitty in cats">
...with...
<tr ng-repeat="kitty in cats | filter:{'sex': 1}">
...but for obvious reasons, I would much prefer to have this functionality available dynamically, rather than hard-coded.
I've tried various ng-models as well as names, ids, and values on a given checkbox, but I have yet to figure out the correct syntax with which to pass the argument 1 to the repeat function, to have it filter the cats as necessary.
Does anyone have any ideas on how these two should be bound?
you probably want this:
HTML
<table>
<tr>
<th>Name</th>
<th>Sex</th>
<th>Color</th>
<th>Pattern</th>
<th>Picture</th>
</tr>
<tr ng-repeat="kitty in cats | filter : {sex: genderFilter}">
<td>{{ kitty.name }}</td>
<td>{{ kitty.sex ? 'Male' : 'Female' }}</td>
<td>{{ kitty.color }}</td>
<td>{{ kitty.pattern }}</td>
<td ng-if="kitty.picture">
<img ng-src="{{kitty.picture}}" alt="{{kitty.name|capitalize}}">
</td>
<td ng-if="!kitty.picture">NO IMAGE</td>
</tr>
</table>
<label>
<input type="checkbox"
ng-true-value="1"
ng-false-value
ng-model="genderFilter">Male
</label><br>
<label>
<input type="checkbox"
ng-true-value="0"
ng-false-value
ng-model="genderFilter">Female
</label>
PLUNKER: http://plnkr.co/edit/av2cyzJmwxJLkqhSFnOv?p=preview
You can send filter value dynamically based on selected checkbox value.
<table ng-repeat="cat in cats | filter : { sex: selectedGender }" style="width:300px">
verify this sample http://fiddle.jshell.net/w9darn8a/2/
I have 2 tables i want to push the row of the first table to the second.
table 1 :
<table>
<tr ng-repeat="row in items">
<td>{{row.PRODUCTDESCRIPTION}}</td>
<td><input type="text" ng-model="quantity[$index]"></td>
</tr>
</table>
<button ng-click="pushRows(row)"> </button>
table 2 :
<table>
<tr ng-repeat="row in products">
<td>{{row.PRODUCTDESCRIPTION}}</td>
<td><input type="text" ng-model="quantity[$index]"></td>
</tr>
i need to push the row in table 1 to the table 2 (my problem is how to push the input type text with its value)
You can use ng-model and create a new property on all the items.
plunker Example
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>
Im using this awesome angular material, now what im trying to do is when the angular checkbox 1 is click then all the input checkbox that has a class of "column_1" will be check, same as the angular checkbox 2 and 3, clicking in any of them will then checked the corresponding input checkbox that was bind for the clicked angular checkbox e.g if click checkbox2 then all the input checkbox that has a class of "column_2" will be check, click checkbox3 then all the input checkbox that has a class of "column_3" will be check. Any help, clues, ideas, recommendation and suggestion to achieve it?
here's my html
<div ng-app="j_app">
<div ng-controller="j_controller">
<md-checkbox ng-model="check">
</md-checkbox>
<table>
<thead>
<th><md-checkbox class="checkbox1"></md-checkbox></th>
<th><md-checkbox class="checkbox2"></md-checkbox></th>
<th><md-checkbox class="checkbox3"></md-checkbox></th>
</thead>
<tbody>
<tr class="row_1">
<td class="column_1"><md-checkbox></md-checkbox></td>
<td class="column_2"><md-checkbox></md-checkbox></td>
<td class="column_3"><md-checkbox></md-checkbox></td>
</tr>
<tr class="row_2">
<td class="column_1"><md-checkbox></md-checkbox></td>
<td class="column_2"><md-checkbox></md-checkbox></td>
<td class="column_3"><md-checkbox></md-checkbox></td>
</tr>
</table>
</div>
</div>
and my script (module and controller)
var app = angular.module('j_app', ['ngMaterial']);
app.controller('j_controller', function($scope) {
$scope.check = {
value1 : true,
value2 : false
};
});
Here is a plunker that looks to the behavior you want :
I basically dynamically created the checkboxes to have a better control on it.
<th ng-repeat="(column,columnindex) in [1,2,3]">
<md-checkbox ng-change="checkColumnCheckBoxes(columnindex,checkBoxesHeader[columnindex])"
ng-model="checkBoxesHeader[columnindex]" class="checkbox1">
</md-checkbox>
</th>
<tr class="row_{{$index}}" ng-repeat="(row,rowindex) in [1,2,3]">
<td class="column_{{$index}}"
ng-repeat="(column,columnindex) in [1,2,3]">
<md-checkbox ng-init="checkBoxes[rowindex][columnindex] = false"
ng-model="checkBoxes[rowindex][columnindex]">
</md-checkbox>
</td>
</tr>
You can replace "[1,2,3]" with any other counter.
My js "checkColumnCheckBoxes" function :
$scope.checkColumnCheckBoxes = function(index,value){
angular.forEach($scope.checkBoxes, function(checkBox,key){
$scope.checkBoxes[key][index] = value;
})
}
I'm pretty sure you will have to rework this to your "real" needs (as you don't need a table that display only checkboxes) but it could be a solid start. If you need some help to adapt it to your needs feel free to ask.
Hope it helped.
Since your HTML is pre-generated here is how it should look like :
<table>
<thead>
<th><md-checkbox ng-change="checkColumnCheckBoxes(0,checkBoxesHeader[0])" class="checkbox1" ng-model="checkBoxesHeader[0]"></md-checkbox></th>
<th><md-checkbox ng-change="checkColumnCheckBoxes(1,checkBoxesHeader[1])" class="checkbox2" ng-model="checkBoxesHeader[1]"></md-checkbox></th>
<th><md-checkbox ng-change="checkColumnCheckBoxes(2,checkBoxesHeader[2])" class="checkbox3" ng-model="checkBoxesHeader[2]"></md-checkbox></th>
<tbody>
<tr class="row_1">
<td class="column_1"><md-checkbox ng-init="checkBoxes[0][0] = false" ng-model="checkBoxes[0][0]"></md-checkbox></td>
<td class="column_1"><md-checkbox ng-init="checkBoxes[1][0] = false" ng-model="checkBoxes[0][1]"></md-checkbox></td>
<td class="column_1"><md-checkbox ng-init="checkBoxes[2][0] = false" ng-model="checkBoxes[0][2]"></md-checkbox></td>
</tr>
<tr class="row_2">
<td class="column_1"><md-checkbox ng-init="checkBoxes[0][1] = false" ng-model="checkBoxes[1][0]"></md-checkbox></td>
<td class="column_1"><md-checkbox ng-init="checkBoxes[1][1] = false" ng-model="checkBoxes[1][1]"></md-checkbox></td>
<td class="column_1"><md-checkbox ng-init="checkBoxes[2][1] = false" ng-model="checkBoxes[1][2]"></md-checkbox></td>
</tr>
</table>
I also updated the plunker to match the exemple.