Have a look at the following code:
1.
<th ui-if="testBool">Test</th>
Problem with this snippet is that gets generated and the ui-if only includes or excludes the value test but not the whole table header.
2.
<div ui-if="testBool">
<th>Test</th>
</div>
This always shows the div nevertheless the value of testBool.
So is it possible to dynamically include th/tr's in a table?
Angular already has a directive ngIf for this. The element on which ng-if is placed only gets rendered if ngIf holds true else it does not.
<th ng-if="testBool">Test</th>
You should be using atleast version 1.1.5 for this.
Related
I have two table, table 1 and table 2.. Table 1 has a field count. based on the count value(count value= no of rows populated), rows should be automatically populated in table 2. I am new to angularjs. Please let me know how can acheive this
To render values in your table you can use ng-repeat directive.
You can use things such the ngIf, ngShow and ngHide directive to hide or show DOM objects based on an expression, or use ngRepeat to dynamically add additional DOM object based on a growing or shrinking array in your controller.
My guess is you're looking for an visibility directive, so I think the following might help:
<table id="table1">
<tr data-ng-repeat="row in table1">
<td>{{row.someData}}</td>
</tr>
</table>
<table id="table2" data-ng-show="table1.length == 0">
<tr data-ng-repeat="row in table2">
<td>{{row.someData}}</td>
</tr>
</table>
Note that both tables are filled with an ngRepeat by using corresponding arrays from your controller as a source. On the second table, you can see an ngShow directive with an expression that says: "if table1 is empty, show me".
I hope this helps.
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 the following table markup:
<tr ng-repeat="client in clientsIndex">
<td>{{client.fullName}}</td>
<td>{{item.contactPhone}}</td>
</tr>
When the view for this renders, I see only one column is populated, but nothing logged in the console. Is there a way I can tell angular this is a debugging session, and I'd like to see big screaming error messages if I make a copy and paste mistake?
Surely at the time the {{}} expression is evaluated whatever does that can output a non-blank value at least?
As of Angular 1.1.5 there is support for ternary operators in templates. So you can define something like this to get a default value if undefined:
<tr ng-repeat="client in clientsIndex">
<td>{{client.fullName}}</td>
<td>{{item.contactPhone ? item.contactPhone : 'Error: not defined'}}</td>
</tr>
The general structure is: {{(condition) ? (expression if true) : (expression if false)}}.
For debugging purpose you can select the element using any angular.element("") selectors and see the scope of that element to check the variable you are trying to access inside the element is inside the scope available to that element.Find the example below.i have used an id selector you can use a child selector.
<tr id="canbeReplacedWithChildSelectors" ng-repeat="client in clientsIndex">
<td>{{client.fullName}}</td>
<td>{{item.contactPhone}}</td>
</tr>
angular.element("#canbeReplacedWithChildSelectors").scope() execute this and check client.fullName is available in the scope.in your case angular.element("#canbeReplacedWithChildSelectors").scope().client would give you undefined.
<tr ng-repeat="row in rows">
<td ng-class="{row[th]:$last}" ng-repeat="th in ths">{{row[th]}}</td>
</tr>
for the code above, i'm trying to use the row[th] value as the name of the class in ng-class for the last td element only.
I can use an actual class name just fine, but not the referenced value from row[th]. Any ideas how to accomplish this?
PS: the row[th] will return a status (e.g. Red, Green, etc.), which is also a css class name i'm using.
jsFiddle here
in the fiddle above, if i replace row[th] with Green in ng-class, that works!
the solution below by #tasseKATT works fine, however now i seem to have another issue. i'm not able to include another static-named class. Fiddle link here. Any help much appreciated.
After much troubleshooting, I came up with the following solution (extending #tasseKATT's original answer:
<td ng-class="{true: [row[th], 'staticCSSClassName']}[$last]" ng-repeat="th in ths">{{row[th]}}</td>
The code above adds two classes to the last <td> in ng-repeat:
value contained in row[th]
staticCSSClassName
So, basically, the value part in the Object can be an array of strings, which can include referenced values from ng-repeat as well as static class names.
working jsfiddle here
Hope someone finds this useful.
I have the following
<div ng-if="false"> nothing here </div>
Shouldn't the div's content be hidden?
I want to make this slightly more complex like :
<div ng-if="user.id == 1">
The name is: {{user.name}}
</div>
but none of the above work.
The aim is if the ng-if expression is true to run the code inside the div. Is the ngIf the correct expression or is there a better boolean/expression handler?
ng-if directive is introduced in AngularJS v1.1.5, so you must be using some older version of Angular.
Here is a plunker: http://plnkr.co/edit/gvDUsLrTSS54jCJMDS89?p=preview
Everything just works fine.
Stewie is right you are using probably the stable 1.0.8 version of angular.