I am trying to set td value based on condition, here is my code
<td>
<span ng-init="tdValue=true;"></span>
<span ng-repeat="value in data_report" ng-if="fellow.F_Id==value.fellowship_id">
<span ng-init="tdValue=false;">{{value.Completed}}</span>
</span>
<span ng-if="tdValue">0</span>
</td>
In the following code I am checking
1. If the condition matches set the value to value.completed
2. If not keep default value as zero
But the result i am getting is
14 0
14 is value.completes and 0 is default value (Both the values are getting printed)
You must target the nested <span>, not the repeater <span> itself :
<td>
<span ng-init="tdValue=true"></span>
<span ng-repeat="value in data_report">
<span ng-if="fellow.F_Id==value.fellowship_id" ng-init="$parent.$parent.tdValue=false">{{value.Completed}}</span>
</span>
<span ng-if="tdValue==true">0</span>
</td>
Also
both ng-repeat and ng-if creates nested child scopes, thus $parent.$parent is needed to address the outer tdValue
ng-if must consist of expressions, i.e ng-if="tdValue == true"
You Can use ternary operator
<td>
<span ng-init="tdValue=true;"></span>
<span ng-repeat="value in data_report" ng-if="fellow.F_Id==value.fellowship_id">
<span>{{tdValue==true?value.Completed:0}}</span>
</span>
</td>
Can you instead remove this ng-init="tdValue=true;" and declare it inside your controller.
$scope.tdValue=true;
Try this
<td>
<span >{{selectedId}}</span>
</td>
This is controller code you can try out.
$scope.selectedId=0;
for(var i=0;i<$scope.data_report.length;i++){
if($scope.fellow.F_Id==$scope.data_report[i].fellowship_id){
$scope.selectedId=$scope.data_report[i].fellowship_id;
break;
}
}
Then you have to apply if condition on span tag in which you are using ng-repeat.
<td>
<span ng-init="tdValue=true"></span>
<span ng-repeat="value in data_report" ng-if="fellow.F_Id==value.fellowship_id">
<span ng-init="$parent.$parent.tdValue=false">{{value.Completed}}</span>
</span>
<span ng-if="tdValue==true">0</span>
</td>
Related
I am trying to use ng-switch to display different hyperlink such as Modify/Approve/Reject But the hyper link is not showing up on screen , when i use it to display text it is working . what am i missing . This is my HTML
<table>
<tr ng-repeat='item in errorsd'>
<td ng-switch={{val.action}} align="left" class="validationMsg">
<span ng-switch-when="View"><a href style="cursor: pointer" data-toggle="modal" data-target="#editWindow" ng-click="ModifyConfig(details)">Modify</a></span>
<span ng-switch-when=Approve><a href style="cursor: pointer" data-toggle="modal"data-target="#editWindow" ng-click="RejectConfig(details)">Reject</a></span>
<!-- and so on.. -->
</td>
ng-switch-when needs expression to compare, so wrap value with '(single quote) would do the trick. Addionally remove {{}}(interpolation directive) from ng-switch directive as it needs only expression.
Markup
<tr ng-repeat='item in errorsd'>
<td ng-switch="val.action" align="left" class="validationMsg">
<span ng-switch-when="'View'">
<a href style="cursor: pointer" data-toggle="modal" data-target="#editWindow" ng-click="ModifyConfig(details)">Modify</a>
</span>
<span ng-switch-when="'Approve'">
<a href style="cursor: pointer" data-toggle="modal"data-target="#editWindow" ng-click="RejectConfig(details)">Reject</a>
</span>
</td>
</tr>
first your ng-repeat creates the variable "item",
that should be used in your ng-switch ("val" is not known)
<td ng-switch="item.action">
then you missed the quotes here:
<span ng-switch-when=Approve>
Working example here
Can anyone help me solving the below issue, Currently I am using below code to display the values where i am using the two <td> tags derive the conditional values , Is there any way I can do kind of else in one <td> tag?
<td class="features" ng-if="OrderStatus.length>0">
<span ng-repeat="indi in ServiceDisconnects.Service">{{indi.serviceID}}<br></span>
</td>
<td class="features" ng-if="!OrderStatus.length>0">
<span ng-repeat="indi in ServiceDisconnects.Service">{{indi.productID}}<br></span>
</td>
Why dont you check it inside ng-repeat
<td ng-repeat="indi in ServiceDisconnects.Service">
<span ng-if="OrderStatus.length>0" >{{indi.serviceID}}<br></span>
<span ng-if="!OrderStatus.length>0" >{{indi.serviceID}}<br></span>
</td>
Just add your condition in expression({{}})
<td ng-repeat="indi in ServiceDisconnects.Service">
<span>{{ OrderStatus.length>0? indi.serviceID:indi.productID}}</span><br>
</td>
This is what you are looking for. Modify as per your need.
<td class="features" >
<span ng-repeat="indi in ServiceDisconnects.Service">
<span ng-if="OrderStatus.length>0">{{indi.serviceID}}</span>
<span ng-if="!OrderStatus.length>0">{{indi.productID}}</span>
<br></span>
</td>
I have to show error for each row in a List.
HTML code
<tr ng-repeat="model in models">
<td>
<div role="alert">
<span class="error" ng-show="errorField_{{models.indexOf(model)}}" translate="eror"></span>
</div>
</td>
</tr>
ng-show errorField_1, errorField_2..... and so on...
Now how i can i get hold of ng-show variable in controller class ? Any clue for example if i want to change particular variable state. I dont know how to get hold of the dynamicity.
$scope.errorField_12 = false;
Instead of declare seprate variable in scope.
Try to use property in models
Like this
<tr ng-repeat="model in models">
<td>
<div role="alert">
<span class="error" ng-show="model.isError" translate="eror"></span>
</div>
</td>
</tr>
Make isError true or false to show/hide
Like you wanna to show first item's error
$scope.models[0].isError = true;
I'm new to angular js & working on it ,to develop a shopping cart(E-com) Website.I'm having a little problem with my code.I have to increment a variable in a for loop in a view page, even i have to write an if clause to display the button, is it possible to write a for loop & if clause in a view file? Please suggest some better tutorials to learn the Angularjs thoroughly.
Here is my code
<table class="table table-bordered">
<tr class="well">
<td class="tdRight" colspan="4" >
<a href="index.htm#/store" title="go to shopping cart" ng-disabled="cart.getTotalCount() < 1">
<i class="icon-shopping-cart" />
<b>{{cart.getTotalCount()}}</b> items, <b>{{cart.getTotalPrice() | currency}}</b>
</a>
</td>
</tr>
<tr ng-repeat="product in store.products | orderBy:'name' | filter:search" >
<td class="tdCenter"><img ng-src="img/products/{{product.sku}}.jpg" alt="{{product.name}}" /></td>
<td>
<b>{{product.name}}</b><br />
{{product.description}}
</td>
<td class="tdRight">
{{product.price | currency}}
</td>
<td class="tdCenter">
<button class="btn btn-success" type="button" ng-hide="cart.getTotalCount() > 0" ng-click="cart.addItem(product.sku, product.name, product.price, 1)">+</button>
<span ng-int="counter=0;"></span>
<span ng-repeat="item in cart.items">
<span>{{ counter}}</span> // I want to increment the counter here, if counter will increment to 1 then have to display the button
<div>
<span ng-if="item.name!=product.name">
<button class="btn btn-success" type="button" ng-show="item.name!=product.name" ng-click="cart.addItem(product.sku, product.name, product.price, 1)">+</button>
</span>
</div>
<div ng-show="item.name==product.name">
<button class="btn btn-success" type="button" ng-click="cart.addItem(product.sku, product.name, product.price, 1)">+</button>
<input class="span3 text-center" ng-change="cart.addItem(product.sku, product.name, product.price, this.value)" type='tel' ng-show="item.name==product.name" ng-model='item.quantity'>
<button class="btn btn-incerse" type="button" ng-click="cart.addItem(product.sku, product.name, product.price, -1)">-</button>
</div>
</span>
</td>
</tr>
<tr class="well">
<td class="tdRight" colspan="4">
<a href="index.htm#/store" title="go to shopping cart" ng-disabled="cart.getTotalCount() < 1">
<i class="icon-shopping-cart" />
<b>{{cart.getTotalCount()}}</b> items, <b>{{cart.getTotalPrice() | currency}}</b>
</a>
</td>
</tr>
</table>
It's bad practice to code JS directly in HTML.
Make another file for your script and include it to your HTML by puting this in the HTML-head:
<script src="filename.js" type="text/javascript" ></script>
For me it seems, as you're misinterpreting HTML as a procedural script, it's not. You don't want to increment at the procedural stage where the is processed, due this never happens (HTML isnt a programming language).
Better think of HTML as a stencile that defines what kind of elements the page has, as well as their attributes. But HTML doesn't process anything.
But due you, and any other webdev, want to write stuff conditional, an HTML element can trigger functions and handover attributes (like a click).
So now you have to figure out, when exactly you need the increment.
Due it depends on the number of products in the card (if I got that right?) your incremental function has to be called whenever the number of products change, or whatever event you want to trigger the increment.
I'm not firm with angular syntax, so I'm using jQuery and comments:
// set the value of element with id "element_id" to ct
// this function directly alters the elements value, and returns true or
// false, depending if the change has taken place.
function set_count( ct ){
return $("#element_id").val( ct );
};
function count(){
var ct;
for ( whatever ) {
ct++;
};
return ct;
}
// Now the trigger
<element onclick='set_count( count() )'>
I have a simple ng-repeat, that displays a list of statuses. I wanted to extend this ng-repeat to ng-switch to display a value depending on the status.
Current ng-repeat:
<td ng-repeat="myStatus in history.Status.slice(0, 12)">
{{ myStatus }}
</td>
With ng-switch:
<td ng-repeat="myStatus in history.Status.slice(0, 12)" ng-switch="myStatus">
<span ng-switch-when="1">test1</span>
<span ng-switch-when="2">test2</span>
<span ng-switch-when="3">test3</span>
<span ng-switch-when="4">test4</span>
<span ng-switch-when="5">test5</span>
<span ng-switch-when="6">test6</span>
<span ng-switch-when="7">test7</span>
<span ng-switch-default>Error</span>
</td>
However, witht eh above ng-switch, nothing is displayed.
Works at my end, here is the Plunker
However as a suggestion i would prefer to use a function expression instead of ng-switch.
<td ng-repeat="myStatus in history.Status.slice(0, 12)">
<span>{{getStatus(myStatus)}}</span>
</td>
getStatus is a function which would return the required information.
Use This
<td ng-repeat="myStatus in history.Status.slice(0, 12)" >
<span ng-switch="myStatus">
<span ng-switch-when="1">test1</span>
<span ng-switch-when="2">test2</span>
<span ng-switch-when="3">test3</span>
<span ng-switch-when="4">test4</span>
<span ng-switch-when="5">test5</span>
<span ng-switch-when="6">test6</span>
<span ng-switch-when="7">test7</span>
<span ng-switch-default>Error</span>
</span>
</td>