I need to watch all the clicks and input changes on my columns in a html table.
my $watch never triggerd. I don't understand ng-model="" if I use ng-repeat with tables.
fiddle http://jsfiddle.net/k8h0owb8/7/
.....
EDIT
<td><input type="checkbox"
ng-click="clickMyCheckbox(item.checked, $index)"
ng-model="item.checked" />
</td>
$scope.clickMyCheckbox = function(value, index) {
console.log('click');
console.log(value);
console.log(index);
};
my fixed fiddle looks now like this. Now I have to push it into my big sample.
fixed Fiddle
Without any wtachers, you can use ng-model (only) as you mentionned it.
<tr ng-repeat="item in items" >
<td><input type="checkbox" ng-model="item.checked" /></td>
<td>{{item.txt}}</td>
<td><input type="text" size="20" maxsize="20" ng-model="item.comment" /></td>
</tr>
With this, it will be bind on your JSON and value will change each times you need. Moreover, you don't need extra functions on your controller at all.
Working Fiddle
use either $scope.$watch('items') because item is not there on the controller scope.
or place ng-change on your column to call a function on the controller.
Personally I prefer second approach.
Your click is not logging because you have not passed the object to be logged , change the check box parameters like below (where this refers to current object)
ng-change="clickMyCheckbox(this)"
ng-click="clickMyCheckbox(this)"
Demo
Related
whenever I try to check any checkbox from 1st page , checkbox from other pages get checked
i.e if I try to check 1st checkbox from the 1st page, 1st position checkbox from other pages also gets checked
handleCheckboxCheck(e) {
const newSelected = Object.assign({}, this.state.selected);
newSelected[e.target.value] = !this.state.selected[e.target.value]
this.setState({
selected: newSelected[e.target.value]
})
}
<td><input type="checkbox" id={id} checked={this.state.selected ? 'checked' : ''} value={value} onChange={(e) => this.handleCheckboxCheck(e)} /></td>
When rendering lists in react, each element needs to have a unique key. Reacts needs this internally to identify the component.
This is probably the root cause of this problem, try following:
<td key={id}>
<input ... > </input>
</td>
Assigning a key to the input could also work, but assigning the key to the td element follows the react guideline
I have several <input> fields within a <form>. Angular takes the value from those fields regardless of the <form> (which is actually there only for Bootstrap to apply the right styles to inner fields).
Now, I want to be able to reset the fields, and so get Angular update the output associated to them as well. However, a regular <input type="reset"/> button is not working. It resets the values of all the <input> fields, but Angular is not refreshing the output that is based on the fields after it.
Is there any way to tell Angular to refresh the outputs based on the current state of the fields? Something like a ng-click="refresh()"?
Let's say you have your model called address. You have this HTML form.
<input [...] ng-model="address.name" />
<input [...] ng-model="address.street" />
<input [...] ng-model="address.postalCode" />
<input [...] ng-model="address.town" />
<input [...] ng-model="address.country" />
And you have this in your angular controller.
$scope.reset = function() {
$scope.defaultAddress = {};
$scope.resetAddress = function() {
$scope.address = angular.copy($scope.defaultAddress);
}
};
JSFiddle available here.
You should have your values tied to a model.
<input ng-model="myvalue">
Output: {{myvalue}}
$scope.refresh = function(){
delete $scope.myvalue;
}
JSFiddle: http://jsfiddle.net/V2LAv/
Also check out an example usage of $pristine here:
http://plnkr.co/edit/815Bml?p=preview
I am wanting to generate a table dynamically using Angular JS, based on what is checked on some checkboxes. The problem is that there are a few fields, we will call them relation/column, that I want to display ALWAYS, and the remaining fields only if their box is checked. The relation is searched for via a search box (relations can have multiple columns), and I want to display only the properties of that relation that are relevant to a user.
So
Update Time [X]
Update Status [ ]
Time Zone [ ]
Would display some html along the lines of
<table>
<tr>
<th> Relation </th>
<th> Column </th>
<th> Update Time </th>
</tr>
<tr ng-repeat= "result in results">
<td> {{result.relation}} </td>
<td> {{result.column}} </td>
<td> {{result.update_time}}</td>
</tr>
If no boxes were checked, only the relation and column fields would be populated. The documentation for Angular JS is taking me all over the place, so would anyone have an idea on how to do this?
edit : controller isn't working quite yet, I still need to filter the search results, but basically it goes
$scope.search = function(){
//validate form input
//create url with the input recieved
$http.get(url).success(function(data){
$scope.results = angular.fromJson(data);
});
}
I use mojolicious backend to grab the data I want. Again, the problem isn't that I can't get any data, or that I can't filter the results based on the relation. I want to be able to search based on relation, and only display the attributes of that relation that I want to, based on what is checked. THAT part, I can't figure out.
edit again : the firewall where I'm at prevents me from writing comments/upvoting. You shall be rewarded for your help when I get home tonight. Thank you thank you!
I think the best way to do this would be using ng-show expressions tied to a variable in the model.
For example.
<input type="checkbox" ng-model="updateTime">
makes a checkbox and ties the result to $scope.updateTime. You can then use this variable later on via the ng-show directive like so...
<th ng-show="updateTime"> Update Time </th>
...
<td ng-show="updateTime"> {{result.update_time}}</td>
this means that these elements will only show when updateTime is set to true (i.e the checkbox is checked.)
You can see an example here, I've only implemented the one field but it should be possible to extend it pretty easily!
http://plnkr.co/edit/W6Ht6dnGw4fBplI83fB1?p=preview
I would suggest using a custom filter with the checkbox scope variables passed in. Something like this:
html
<input type="checkbox" ng-model="checkbox1" />
<input type="checkbox" ng-model="checkbox2" />
<input type="checkbox" ng-model="checkbox3" />
... ng-repeat= "result in results|checkboxFilter:{checkbox1,checkbox2,checkbox3}"
filter.js
.filter('checkboxFilter', function() {
return function (results, checkbox1, checkbox2, checkbox3) {
var filtered_objects = angular.copy(results);
for (var i = 0, len = filtered_objects.length; i < len; i++) {
**modify your filtered_objects based on your checkboxes**
if (checkbox1) ...
if (checkbox2) ...
if (checkbox3) ...
}
return filtered_objects;
}
});
Maybe something like that.
I have a list of items being displayed in a html table, where there is a hyperlink in every row.
When I click the hyperlink, I want to call the servlet with that particular item id.
how can i achieve it?
for 10 items.
<tr>
<td>
<input type="hidden" name="" value="%=request.getAttribute("item_id")%>"
</td>
<td align="center">
<font> (String)providerDetail.get("tripTime")<font />
</td>
<td align="center">
<font>(String) providerDetail.get("noOfSeats")</font>
<td align="center">
<font> Select font </font>
</td>
</tr>
endfor
So, when I click the hyperlink, I need to pass the appropriate item_id to the servlet.
How to have the appropriate input element for the running item_id and to pass the same to servlet?
I am not being able to add html elements as it is not formatted correctly.
On assumption you are using ajax, onclick call a javascript method, pass item_id as parameter to that method.
Then send this to your server as data (I am using jQuery to do this, you can use any other library )
function sendData(item_id){
jQuery.ajax({
type:"POST",
data:"itemId="+item_id,
success: function(data){
//Your code for a successful request goes here.
},
error: function(data){
//Errors treatment goes here.
}
})
}
In case you are doing something like download of a document based on the item id, this is a good example code for that:
var form = '<form action="downloadme"><input type="hidden" name="itemid" value='+item_id+'</form>';
jQuery(form).submit();
Create a form and submit it, and as an hidden parameter pass item_id.
On completion remove that form from body(as you do not need it anymore).
Hope this helps.
I've a HTML file that shows to the user the contents of a database (it is shown as a table). The user can choose one of the rows.When this is done the selection made by the user is sent to a servlet that will work with that information.
Imagine that this servlet is going to look for files related to the information chosen by the user. What I'd like to do is to provide the user with the option of also choosing the number of files that are going to be looked for by the servlet. That way the user should be able to choose one of the rows shown in the table and should also be able of typing the numers of files that are to be looked for.
So far I'm able to send to the servlet what the user chooses in the table, but I'd like to know if it is possible to attach to this information the number of files requested.
This is my code:
<center><form action="administ" method=post >
<center><table>
<table border=\"1\"><tr><th></th><th>Titleo</th><th>Author</th><th>Album</th></tr>
<c:forEach items="${items}" var="item">
<tr>
<td><input type="radio" name="Song" value="${item.file}#${item.title}#${item.author}$${item.album}">
<td>${item.title}</td>
<td>${item.author}</td>
<td>${item.album}</td>
</tr>
</c:forEach>
</table></center>
<tr><td colspan=2><input type=submit value = play name = option></td></tr>
<tr><td colspan=2><input type=submit value = Delete name = option></td></tr>
At this point I want to add a new option that requires not only a new button, but also requires the user to introduce a number.
That depends. If you want single selection of rows using radiobuttons, then you could just put a single input field at bottom of table, next the submit button or so. E.g.:
<input type="text" name="numberOfFiles">
which you can obtain in the servlet as follows:
String numberOfFiles = request.getParameter("numberOfFiles");
But if you want multiple selection of rows using checkboxes or if you want this field to appear in each row at any way, then you need to give the radio/checkbox field a value of the row index. If you're using JSTL <c:forEach> to iterate over the rows (which I'd expect that you indeed do), then you can make use of the varStatus attribute to declare a LoopTagStatus. Inside the loop you can obtain the row index by LoopTagStatus#getIndex(). E.g.:
<table>
<c:forEach items="${items}" var="item" varStatus="loop">
<tr>
<td><input type="checkbox" name="selected" value="${loop.index}"></td>
<td><input type="text" name="number"></td>
</tr>
</c:forEach>
</table>
<input type="submit">
(to have single selection, just replace type="checkbox" by type="radio")
In the servlet, you can obtain all input fields with the same name in the order as they appear in the table as follows:
String[] numbersOfFiles = request.getParameterValues("numberOfFiles");
With checkbox-selection you can obtain the all selected row indexes and thus also the associated input field as follows:
String[] selectedIndexes = request.getParameterValues("selected");
for (String selectedIndex : selectedIndexes) {
int index = Integer.parseInt(selectedIndex);
String numberOfFiles = numbersOfFiles[index];
// ...
}
Or if it is a radiobutton-selected row which is single selection at any way:
String selectedIndex = request.getParameter("selected");
int index = Integer.parseInt(selectedIndex);
String numberOfFiles = numbersOfFiles[index];