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.
Related
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
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.
I have an Angular Formly form inside an ng-repeat. I've got everything working as I would expect except for the reset button. For some reason clicking any reset button always resets the last form, not the one it's supposed to. Submitting and updateInitialValue() seem to work fine.
<div ng-repeat="model in vm.models">
Here is the form declaration inside the repeat:
<formly-form model="model" fields="vm.fields" options="vm.options[$index]" form="vm.form[$index]">
And here is the reset button.
<button type="button" class="btn btn-default" ng-click="vm.options[$index].resetModel()">Reset</button>
Here is the whole thing in a fiddle.
http://jsbin.com/feguvulumo/edit?html,js,output
Thanks in advance for any help you can give!
I figured this out with some help from #kentcdodds on the Formly gitter chat (https://gitter.im/formly-js/angular-formly)
He suggested that the issue was that the repeating forms are sharing the same field configuration.
To fix it, I implemented a function that was called by an ng-init inside the ng-repeat. It builds up an array of fields objects as it loops.
function addFields() {
vm.fields.push(new getFields());
}
I then changed the fields property on the <formly-form> like so
<formly-form model="model" fields="vm.fields[$index]" options="vm.options[$index]" form="vm.form[$index]">
Full solution
http://jsbin.com/yanopeyija/1/edit?html,js,output
I am also new to angular, but generally this could be achieved if we change the button type as reset :
<button type="reset" >
I'm building a large input form in angular. To make the application user friendly I have broken the form down into many different sections. I need each section to reside within a different group of an accordion. Each section needs to have validation and a user cannot progress until the required field validation has been satisfied.
In the main page of the app I have added the markup for the accordion. Each section within the accordion is a custom directive. The directive contains the markup for each group (The input form and validation) and it also contains the code to connect to the relevant services to persist state within a db.
Sample code
<uib-accordion close-others="true">
<uib-accordion-group heading="Person Details" is-open="heading1.isOpen">
<div person-details></div>
<button class="btn btn-default btn-sm pull-right" ng-click="heading2.isOpen = !heading2.isOpen">Next <i class="glyphicon glyphicon-chevron-right"></i></button>
</uib-accordion-group>
<uib-accordion-group heading="Address Details" is-open="heading2.isOpen">
<div address-details></div>
<button class="btn btn-default btn-sm pull-right">Next <i class="glyphicon glyphicon-chevron-right"></i></button>
</uib-accordion-group>
</uib-accordion>
The difficulty is how to manage what accordion group is open at any time. In the example code above I have a next button to open the next accordion group. However this button needs to reside with the directives themselves in order to manage validation. The problem with this is that the directives then need to know how to control the accordion in order to change the active accordion group - bubble up somehow.
Does anybody have any thoughts on this please? If you think I am going about this is the wrong way please let me know.
Thanks
You need to use a scope variable in your directive(s) that has a two way binding to heading1.isOpen for example. That way the directive will be able to modify the is-open state of its parent directive.
Just search angular docs for directives and isolated scope variables.
Basically I am attempting to do is allow the user to choose to show dollar formatting or not. Easy enough, just use ng-class to toggle the class, right? Except that now in empty cells a dollar sign shows.
What about if we use a custom filter? Well, I don't really know a way to toggle the custom filter on or off.
Any suggestions would be helpful.
Here is the button that toggles the formatting (it runs a function that sets format to true or false).
<button class="btn format-toggle" ng-click="setFormat();">Show <span ng-show="format">Hours</span><span ng-hide="format">Dollars</span></button>
The code that I'm trying to affect
<table>
<tr ng-repeat="project in projects">
<td>{{project.name}}</td>
<td ng-repeat="month in project.months" ng-class="{dollar : format}">{{month.total}}</td>
</tr>
</table>
I actually answered my own question but I suppose I'll leave it up in case someone else finds it useful.
I ended up just using ng-class along with another condition to check that there was a value in the cell.
<td ng-repeat="month in project.months" ng-class="{dollar : format && month !== undefined}">{{month.total}}</td>
CSS:
.dollar:before{
content:'$';
}