If I use this code
<td ng-class="'log-level-' + {{log.level | uppercase}}">
This is the rendered result:
<td ng-class="'log-level-' + WARN" class="log-level-">
If I remove the double brackets
<td ng-class="'log-level-' + log.level">
The rendered result is
<td ng-class="'log-level-' + log.level" class="log-level-Warn">
Is it not possible to uppercase the second log.level property in HTML and mix it with a string?
//EDIT//
NEVER MIND. Typing out the question made me realize I could use wrap the angularjs expression in a string.
<td ng-class="'log-level-' + '{{log.level | uppercase}}'">
I thought this would just render the {{log.level | uppercase}} value as a string but it still processes the expression first.
Typing out the question made me realize I could use wrap the angularjs expression in a string.
<td ng-class="'log-level-' + '{{log.level | uppercase}}'">
I thought this would just render the {{log.level | uppercase}} value as a string but it still processes the expression first.
<td class="static-class {{log.level}}">
Test
</td>
I added sample app also check Fiddler
<div ng-controller="testCtrl">
{{test}}
<table>
<tr>
<td class="static-class">
Test
</td>
</tr>
<tr>
<td class="static-class {{runtimeClass}}">
Test
</td>
</tr>
</table>
<button type="button" ng-click="addRuntimeClass()">
click
</button>
</div>
var app = angular.module('testApp',[])
app.controller('testCtrl',['$scope',
function($scope){
$scope.test='Sample test app';
$scope.addRuntimeClass = function(){
$scope.runtimeClass = 'runtime-class'
}
}])
.static-class{
display:block;
color:black;
}
.runtime-class{
display:block;
color:red;
}
Related
I am trying to redirect the page using ng-click which is avail in ng-repeat.
ng-repeat code:
<tr ng-repeat="students in studlist" ng-click="gotoProfile(1)">
<td width="12%" class="student-list-pic-column"><img src="<?=base_url()."data/student-img/{{ students.photo }}";?>"></td>
<td width="50%" class="custom-table-border-body text-left">{{ students.studname }}</td>
<td width="38%">{{ students.bid }}</td>
</tr>
<tr ng-show="!studlist.length">
<td colspan="3" class="custom-table-border-body text-center">
Search student name ...
</td>
</tr>
Here in ng-click="gotoProfile(1)" instead of that 1 I need {{students.id}} but unable to get
Controller function:
$scope.gotoProfile = function (sid) {
console.log($scope.purl);
var rurl = $scope.purl+sid;
$location.url(rurl);
};
When I run this I am getting url
http://localhost/product/tcm_dev/utility/dashboard#/http://localhost/product/tcm_dev/utility/student/profile/1
like this.
Please help.
Thank You
Prashant
use <tr ng-repeat="students in studlist" ng-click="gotoProfile(student.id)"> to send student.id
and how about use $window.location.href=(rurl); instead of $location.url(rurl);
if you want to open a new page, use $window.location.href=(rurl,'_blank');
There is an array of objects. I sort out of its loop.
In both series to get a link to the image?
vm.data.list- array of object.
Loop:
<tr ng-repeat="item in vm.data.list">
<td ng-bind="item.temp.day"></td>
<td ng-bind="vm.symbal"></td>
<td ng-bind-template="{{ item.humidity }} %"></td>
</tr>
As in the cycle of getting links to the image? (http://openweathermap.org/img/w/vm.data.list[0].weather[0].icon.png, http://openweathermap.org/img/w/vm.data.list[1].weather[0].icon.png and other)
I tried to do so:
<tr ng-repeat="item in vm.data.list">
<td ng-bind="item.temp.day"></td>
<td ng-bind="vm.symbal"></td>
<td ng-bind-template="{{ item.humidity }} %"></td>
<!-- <td img ng-src="http://openweathermap.org/img/w/{{item.weather[0].icon.png}}">-->
<td> <img src=http://openweathermap.org/img/w/{{item}}.weather[0].icon.png></td>
</tr>
you need to use ng-src instead of src: https://docs.angularjs.org/api/ng/directive/ngSrc. Angular will first compute the ng-src value and then construct the src for you.
Here is a basic example: jsfiddle:
<div ng-repeat="item in items">
<img ng-src="http://www.w3schools.com/{{item.f.folders[0]}}/{{item.name}}">
</div>
In your case, use :
<img ng-src="http://openweathermap.org/img/w{{item.weather[0].icon}}.png">
Aside from the ng-src, be aware that:
an url beginning with something else than a protocol or a slash is relative: it will be resolved against the context of the current page. In your case, don't forget the http:// at the beginning !
all the angular expression inside the link should be inside the brackets: {{item}}.weather[0] won't work
In the view (html file) I have:
<tr ng-repeat="task in ctrl.model.unplannedTasks">
<td>{{::$index + 1}}</td>
</tr>
How can I reference $index + 1 value in my controller?
I have tried doing this:
<tr ng-repeat="task in ctrl.model.unplannedTasks" ng-init="myIndex = $index + 1">
<td ng-model = "myIndex">{{myIndex}}</td>
</tr>
And then reference it in the controller with myIndex, but it is undefined.
[EDIT]
$index + 1 is the row number in the table. I would like to reference a current value of the specific row in order to be able to put it in the message like:
Are you sure you want to delete row e.g. 5? (this message is generated inside the controller)
In controller if it is use as value or otherwise use as array:
angular.module('rock').controller('test',['$scope',function($scope){
$scope.myIndex=0;
$scope.unplannedTasks="you can define your object here";
}]);
In view:
<tr ng-repeat="task in unplannedTasks">
<td myIndex={{::$index + 1}}></td>
</tr>
I just had to pass it as it is $index+1 to the function in which the message is generated.
<tr ng-repeat="task in ctrl.model.unplannedTasks">
<td>{{::$index + 1}}</td>
</tr>
...
<button type="button" class="btn btn-primary btn-xs" ng-click="ctrl.openModal(task, $index + 1)" title="{{::msg.common.button.remove}}">{{::msg.common.button.remove}}</button>
This is my code:
<table ng-init="liveTotal={}">
<tr ng-repeat="x in sovCtrl.topics" >
<td> {{x}}</td>
<td><input ng-model="sovCtrl.objects[x]" type="number"></td>
<td ng-hide="true">
<input ng-model="liveTotal[$index]" type="number" value="{{sovCtrl.objects[x]}}">
</td>
</tr>
</table>
<div > Current Result:
{{ 0 + liveTotal[0] + liveTotal[1] + liveTotal[2] + liveTotal[3] + liveTotal[4]}}
</div>
What I'm trying to do is have a live result of the sum of all the Inputted topic values(there will never be more than 5) without using $scope or any extra sovCtrl methods/objects or adding a script;
The topics are strings I can't predict.
The 2nd input CHANGES when I type into the first input, but the result in the div does not.
The result in the div changes only when I type or press on the 2nd input(if I make it visible)
Can this be done using angular but modifying only the above HTML?
Edit: sovCtrl.objects gets passed into functions that graph the values. Modifying the the keys would break those functions.
Why don't you directly do something like shown below
wherein you directly use the first input
You just add an index (which is provided in ng-repeat of any variable) and now you can access values by using index 0,1,2,3,4
<table ng-init="liveTotal={}">
<tr ng-repeat="(i,x) in sovCtrl.topics" >
<td> {{x}}</td>
<td><input ng-model="sovCtrl.objects[x]" ng-change="sovCtrl.objects_yo[i]=sovCtrl.objects[x]" type="number"></td>
</tr>
</table>
<div> Current Result:
{{ 0 + sovCtrl.objects_yo[0] + sovCtrl.objects_yo[1] + sovCtrl.objects_yo[2] + sovCtrl.objects_yo[3] + sovCtrl.objects_yo[4]}}
</div>
Got it, this works.
<table ng-init="liveTotal={}">
<tr ng-repeat="x in sovCtrl.topics" >
<td> {{x}}</td>
<td><input ng-model="sovCtrl.objects[x]" type="number"></td>
<td ng-show="false"> {{ liveTotal[$index]= sovCtrl.shareOfVoice[x]}}</td>
</tr>
</table>
<div > Current Result:
{{ 0 + liveTotal[0] + liveTotal[1] + liveTotal[2] + liveTotal[3] + liveTotal[4]}}
</div>
at the moment I have list of events with a pagination on the bottom of the list. That works well, but now I want to add a addintional pagination on the to of the list. When I now change the pagination on the bottom the pagination on the top is not updated.
My working code is:
<tbody>
<tr dir-paginate="event in events | orderBy:['id', 't']:true | itemsPerPage: dirPaginate.pageSize" current-page="dirPaginate.currentPage">
<td><i class="{{ ::(event.el | eventtype).icon }}" tooltip="{{ ::(event.el | eventtype).tooltip }}"></i></td>
<td class="hidden-xs">{{::event.nr}}</td>
<td><span ng-bind-html="::('' + event.tg | eventMessage:event.d:'html')"></span>
<span class="visible-xs"> ({{::event.nr}})</span>
</td>
<td>{{ ::(event.t * 1000 | date:'mediumDate')}} <span class="visible-xs">{{ ::(event.t * 1000 | date:'mediumTime')}}</span></td>
<td class="hidden-xs">{{ ::(event.t * 1000 | date:'mediumTime')}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="paginationContainer"><dir-pagination-controls></dir-pagination-controls></td>
</tr>
</tfoot>
How can I uptate both paginations when one of them is changed?
Download dirPagination.js from here. .
Now include dirPagination.js to your page.
Add angularUtils.directives.dirPagination in your module like this
var app = angular.module("myApp",
['angularUtils.directives.dirPagination']);
4.we use dir-paginate directive for pagination add dir-paginate in tr tag
<tr dir-paginate="event in events|orderBy:['id', 't']:true |
itemsPerPage: dirPaginate.pageSize">
5.Add below given code on upper and lower side of your grid .it will automatically update page no. in both pagination controls.
<dir-pagination-controls
max-size="5"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>