I gave a grid of checkboxes, whenever I try to click any it passes always the same one in the ng-click
HTML
<tr ng-repeat="partecipant in current_event.partecipants">
<td class="user_cell"><font class="user_name">{{(partecipant}}</font><span class="arrow"></td>
<td class="checkbox_cell" ng-repeat="proposed_time in current_event.proposed">
<input type="checkbox" class="toggle" ng-checked="isChecked(partecipant, proposed_time)" ng-true-value="true" ng-false-value="false" ng-click="addResponse(partecipant, proposed_time)" ng-disabled="userProfile.webid != partecipant" name="thing" id="thing"><label for="thing">
</td>
</tr>
ng-checked: works fine, the checkboxes are checked accordingly
ng-click: not working, it passes always the first value of proposed_time
ng-disabled: not working, the are all enabled, when they should be enabled only for one row when userProfile.webid == partecipant
Any help is appreciated. Thanks in advance.
EDIT
Solved!
The error was in name="thing" id="thing" that makes the checkboxes have the same name and id, therefor I named them dynamically.
I tried your code.
{{(partecipant}}
Here you have not closed brace '('
Other than that everything works, ng-click and ng-disabled are ok.
Check plunker
Related
I was trying to use ng-disabled to disable a button but failed. Here is the HTML part:
<tr ng-repeat="eachdata in tabledb">
<td>{{eachdata.paid}}</td>
</tr>
<button class="btn btn-primary" ng-click="process(eachdata)"
ng-disabled="eachdata.paid">
The console.log showed that eachdata.paid: "0" or "1". I hope to disable the button when paid:"1".
So I also tried
<button class="btn btn-primary" ng-click="process(eachdata)"
ng-disabled="Boolean(Number('1'))">
but still it is not working.
I checked the reference of convert type in Javascript. It supposed to be true when converting number 1 to boolean and false when converting number 0 to boolean. Can anyone explain that? Thanks a lot.
I dont know why so much confusion regarding a simple thing.First as per your question button is out of scope to ng-repeat.So I assume it is includes in ng-repeat.
<tr ng-repeat="eachdata in tabledb">
<td>{{eachdata.paid}}</td>
<td><button class="btn btn-primary" ng-click="process(eachdata)"
ng-disabled="checkIfDisabled(eachdata.paid)"></td>
</tr>
In controller define checkIfDisabled function
$scope.checkIfDisabled=function(paid){
return (paid == "1");
}
You are closing the repeated table row before the button, therefore your "eachdata" variable isn't available to the button scope. Include the button inside the td, or elsewhere within the scope of the tr.
Your button is out of scope from the ng-repeat. If you want the button outside of your table you can maybe use a dummyTag and run the ng-repeat inside it.
I have started using Angular and don't have much experience in it.
I am stuck with an issue. I am using ng-show and ng-model.
its like
<tr ng-show="responseValid">
<td> <input id="nameId" ng-model="model.name"/> </td>
</tr>
I am pre-populating the value in model.name.
Now if response is valid the input tag is shown otherwise not.
but when I submit the form, nameId value is bind by ng-model="model.name"
Issue here is I want model.name should not contain any value if response is not Valid i.e when input tag is hidden. but its not happening.
How can I nullify/empty the value in model.name? Is there anything available that I can use in the tag itself?
You should use ng-if instead of ng-show I believe.
ng-if removes elements from the DOM while ng-show only sets display:none.
When your send your model, check the state of the validResponse and set your model data based in this
example:
$scope.sendModel = function(){
$scope.model.name = $scope.validResponse? $scope.model.name : '';
}
A more advanced example http://codepen.io/gpincheiraa/pen/mPzmxO
You can use ngSwitch or ngIf.
<tr ng-if="responseValid">
<td> <input id="nameId" ng-model="model.name"/> </td>
</tr>
If the condition is not met, angular will completely remove the DOM element, till the condition will meet.
I have a simple table row.
The row is generated by below code.
<tr ng-init="cacheChanged">
<td>Expiration Period</td>
<td ng-repeat="system in tableData.regions[0].systems">
<input type="text" ng-model="system.cacheDuration" ng-change="cacheChanged=true">
<span>h</span>
</td>
<td>
<button type="button" ng-click="saveCache()" ng-disabled="!cacheChanged">Save</button>
</td>
</tr>
When any of the four values changed, the save button is supposed to be enabled. However, it is still disabled all the time. Anyone knows why? Thanks in advance!
In your case you should use $parent.cacheChanged instead of cacheChanged variable. As ng-repeat does create child scope for each loop while rendering DOM. In short the cacheChanged variable inside ng-repeat is not same as that of cacheChanged used there on button.
Markup
<td ng-repeat="system in tableData.regions[0].systems">
<input type="text" ng-model="system.cacheDuration" ng-change="$parent.cacheChanged=true">
<span>h</span>
</td>
There is better way to go for it will be using Dot rule while defining ng-model, look at this detailed answer here.
in a table with ng-repeat is it possible to add a cell only to one row?
in my code:
<tbody>
<tr ng-repeat="user in users ng-click="selectUser(user)">
<td>{{user.username}}</td>
<td><input type="text"....></td>
<td><input type="checkbox"...></td>
<td><input type="submit" ... ng-show="user==selectedUser" /></td>
</tr>
</tbody>
in this code I want the last td appears only on the selected row and does not affect other rows, is it possible? or it is JS or CSS thing ?
First off you should be using the controller as syntax, it automatically puts everything in the controller under 1 object, which can cause issues with Angular. But I don't think that's the issue here.
The user you select could be equal to the selectedUser, but if they aren't pointing to the same reference, they won't be able. If usernames are distinct I'd change the ng-show="user.username == selectedUser.username"
and that should work fine.
It is possible, it seems like your code is mostly correct, but you're using selectedUser as a function and as an object representation of user. Maybe your function would be called selectUser which would set $scope.selectedUser. ng-show="user == selectedUser" would make since then.
I'm personally not a big fan of having conditions in the view, so I'd have a function in the controller which does the comparison and returns true or false.
function isSelectedUser(user) {
return user == $scope.selectedUser;
}
then you can just use ng-show="isSelectedUser(user)"
Use JQuery to append the <td> on the selected row <tr>. The :nth-child() is an easy way for you to select a row.
var selectedRow = 2;
$('tbody tr:nth-child('+ selectedRow +')').append('<td><input type="submit" /></td>');
I've faced following issue:
I have a <table>, where <tr>'s a generated via ng-repeat, and each <tr> contains several <input> elements. Smth like this:
<table>
<tr ng-repeat="plan in plans">
<td>
<input ng-pattern="/^\d+((\.|\,)\d+)?$/" ng-model="plan.field1" ng-blur="updateRow(plan)">
</td>
<td>
<input ng-pattern="/^\d+((\.|\,)\d+)?$/" ng-model="plan.field2" ng-blur="updateRow(plan)">
</td>
</tr>
</table>
When user finishes editing input I want to update full row. But I want to do it only if this input is valid. I mean I want to execute updateRow(plan) only if this condition ng-pattern="/^\d+((\.|\,)\d+)?$/" is satisfied. Or maybe somehow check it within updateRow(). But I can't find a way to do it without forms.
1)Is there a way to do it? Or may be there is better way to implement my idea?
2)And also is there way to bind ng-blur to each input in a row? Because I have about 20 inputs in a row and it looks bad when there is such amount of repeating.
Thanks to everybody in advance!
So I solved the first question by using forms and ng-form. I put every tr element in separate tbody and applied ng-form to each tbody element.
So i believe that I have to use forms if I need validation.