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;
Related
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>
I need two tables on my page and a lot of elements inside tables.
I created file AccountItem.html:
<div data-as-sortable-item-handle>
<table>
<tr>
<td class="draggable-index-field">
{{$index + 1}}
</td>
<td class="draggable-name-field">
{{item.accountName}}
</td>
<td class="draggable-enabled-field">
<input id="enabled-{{$index}}" type="checkbox" name="accounts[]" ng-checked="item.enabled" disabled/>
</td>
</tr>
</table>
This file is related to each row in table.
Also I created file for table SortAccountList.html:
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title ng-binding">{{title}}</h3>
</div>
<div class="panel-body">
<table>
<td class="draggable-index-field">
#
</td>
<td class="draggable-name-field">
Account Name
</td>
<td class="draggable-enabled-field">
Enabled
</td>
</table>
<ul data-as-sortable = "sortableOptions" data-ng-model="accountList" class="draggable-area">
<li ng-repeat="item in accountList" data-as-sortable-item ng-include="'AccountItem.html'"></li>
</ul>
</div>
I include this file with directive in my main file:
<div ng-include="'SortAccountList.html'" onload="title = 'Sorted Account List'; accountList = sortedAccounts"></div>
When I load this page in browser it shows me table, title on it which I pass with "title" parameter. But it does not want to show rows in the table. However, if I change accountList to sortedAccounts which is a List in my controller it shows all rows.
I can not use sortedAccounts because I have second table where I want to pass different accounts from my controller.
So, my question, how to pass properly this parameter? Thank you!
The ng-init="" attribute on the include tag should do what you need.
<div ng-include="'SortAccountList.html'"
ng-init="title = 'SortedAccount List'; accountList = sortedAccounts"></div>`
Do not use ngInclude. Use a directive and pass data using directive's scope.
directive('sortAccountList', function() {
return {
restrict: 'E',
scope: {
title: '=',
accountList: '='
},
templateUrl: 'SortAccountList.html'
};
});
I have just looked for the same problem but I didn't find a solution. I tried some solutions and examples but nothing worked.
I have this HTML code in AngularJS:
<h2 class="text-center text-thin">{{pageTitle}}</h2>
<input type="text" ng-model="searchText" placeholder="Search" class="center-block" />
<div>
<br>
</div>
<div class="list col-xs-12">
<table class="tbl-catalogo">
<tr class="even">
<td>Article</td>
<td>Family</td>
<td>Ice Type</td>
<td>Cooler</td>
</tr>
<tr ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat="prod in list | filter:searchText" ng-click="_dettaglio3(prod);">
<td>{{prod.id_a}}</td>
<td>{{prod.id_f}}</td>
<td>{{prod.forma}}</td>
<td>{{prod.tipo_raff}}</td>
</tr>
</table>
</div>
And in my controller I have this function:
$scope._dettaglio3 = function (val) {
alert(JSON.stringify(val));
console.log("\n\n\n\n\n\n" + JSON.stringify(val) + "\n\n\n\n\n\n");
};
Problem: When I click in the tr the first time it's correct, when I click a second time the element passed is the first, if I click another time the element passed is correct. How i can fix this problem?
I have a table with fields from ng-repeat. I have added two extra field such as a input and a button to each row.
What i want is when i enter some value in input and press button i want to run a function with the value of corresponding input. How do i do that?
My View
<tr ng-click="" ng-repeat='customer in customers | filter:query | orderBy: sort.field : sort.order'>
<td ng-repeat='field in fields'>
{{customer[field]}}
</td>
<td>
<input class="form-control" name="debit" type="text">
</td>
<td>
<button ng-click="genEcs(customer['id'])" class="btn btn-primary btn-sm" >ECS</button>
</td>
</tr>
My controller
$scope.genEcs=function(id){
}
You need to assign a model to your input via ng-model attribute. The model would be defined in the scope of each customer of ng-repeat, because ng-repeat creates child scopes:
So, you could do this:
<tr ng-repeat='customer in customers>
<td>
<input class="form-control" ng-model="customersDebit" name="debit" type="text">
</td>
<td>
<button ng-click="genEcs(customer, customersDebit)">ECS</button>
</td>
</tr>
(I also suggest, for the sake of readability and separation of concerns, to pass the entire customer object to the genEcs function, rather than only the id field. The less your View knows about business logic, the better.)
I observed that when I include a template with the ng-include directive, ng-show and ng-hide don't seem to work.
Note: Tested in angularjs 1.0.4 and 1.0.5
This Works
template.html
<table ng-init="changeable = null">
<tr ng-repeat="(key, item) in items" ng-click="changeable = key">
<td>
<span ng-show="changeable != key">{{item.name}}</span>
<input ng-hide="changeable != key" ng-model="item.name">
</td>
<td>
<button ng-click="changeable = null">OK</button>
</td>
</tr>
</table>
This does not work
template.html
<div ng-include src="'/changeable_table.html'"></div>
changeable_table.html
<table ng-init="changeable = null">
<tr ng-repeat="(key, item) in items" ng-click="changeable = key">
<td>
<span ng-show="changeable != key">{{item.name}}</span>
<input ng-hide="changeable != key" ng-model="item.name">
</td>
<td>
<button ng-click="changeable = null">OK</button>
</td>
</tr>
</table>
Update
after a while github#pkozlowski-opensource give me a link to the wiki that explains really good why is necesary this namespace, it's The Nuances of Scope Prototypal Inheritance
You have 2 problems there:
Don't forget that ng-repeat creates a new scope for each entry and the way you're doing it, the changeable property will not be shared among all those scopes. Define your model correctly (example):
<table ng-init="model = {}; model.changeable = null">
And change all references to changeable to model.changeable.
The ng-click on the tr will override the ng-click on the button (when you click the button you also click on the tr). Move the tr ng-click to the span:
<span ng-show="model.changeable != key" ng-click="model.changeable = key">{{item.name}}</span>
plunker: http://plnkr.co/edit/TTAUsPhqSq2rkF47EtNL?p=preview