Trying to implement a simple keypress event on a div but somehow nothing happens. I have read at some places that I need tabindex="0", however problem still prevails. Here is my html:
<body ng-app="myModule">
<div ng-controller="myCtrl" movement tabindex="1" ng-keypress="iterate($event)">
<div ng-repeat="entity in entities" entity-position="entity"></div>
<div class="table">
<div>
<select selected='name' ng-model="selected" id="select">
<option value="name" >First</option>
<option value="id">Second</option>
<option value="id">Third</option>
</select>
</div>
<table id="table">
<tr ng-repeat="item in cars | orderBy:selected" ng-click="go(item)">
<td>{{item.plate}}</td>
<td>{{item.name}}</td>
<td>{item.price}}</td>
</tr>
</table>
</div>
"movement" is a custom directive with it's own controller, I'm guessing the problem is connected to this, but I'm not sure.
This is inside the movement directive's controller (never logs anything):
$scope.iterate = function($event){
console.log('iterate')
}
Thank you for your help.
Edit: Added directive
app.directive('movement', function() {
return {
controller: function($scope, animFrame) {
var width = window.innerWidth;
var height = window.innerHeight;
var speed = .5;
var lastTime = new Date().getTime();
$scope.entities = [];
$scope.changeCount = function(count) {
while(count>0) {
$scope.entities.push({
x: width/2 * Math.random()+100,
y: height/2 * Math.random()+100,
velX: 0.2,//speed * Math.random()/2,
velY: 0.1,//speed * Math.random()/3
});
count--;
}
while(count<0) {
$scope.entities.pop();
count++;
}
}
$scope.tick = function($event){
//console.log('tick')
var now = new Date().getTime(),
delay = now - lastTime,
entities = $scope.entities;
for(var i=0; i<entities.length; i++) {
var b = entities[i];
b.x += delay * b.velX;
b.y += delay * b.velY;
if (b.x < 0) { b.x *= -1; b.velX *= -1;}
if (b.y < 0) { b.y *= -1; b.velY *= -1; }
if (b.x > width) { b.x = 2*width - b.x; b.velX *= -1;}
if (b.y > height) { b.y = 2*height - b.y; b.velY *= -1; }
}
lastTime = now;
animFrame($scope.tick);
}
$scope.changeCount(1);
$scope.tick();
}
};
});
Related
I'm trying to update the table view depending on select option. The table view is updating only once, when i select the option second time the view is not updating, I'm not getting what's the problem. please help me solve this..
here is app.js
$scope.User = {};
$scope.arr = [];
$scope.loaddata = function(User) {
$scope.User.site = layouts;
AllServices.teamAllDataFunction1(User)
.then(function(response) {
$scope.User.data=response.data;
});
};
$scope.getdatalayoutwise = function(User) {
var total = 0;
var total1 = 0;
for (var i = 0; i < ($scope.User.data).length; i++) {
if($scope.User.data[i].Layout == $scope.User.selectedSite) {
total += parseInt($scope.User.data[i].dp_inst_pending);
$scope.arr.push($scope.User.data[i]);
}
}
for (var j = 0; j < ($scope.User.data1).length; j++) {
if($scope.User.data1[j].Layout == $scope.User.selectedSite) {
total1 += parseInt($scope.User.data1[j].DP_Inst_Pending);
}
}
$scope.User.teamTotal = total;
$scope.User.personalTotal = total1;
$scope.data = [$scope.User.teamTotal, $scope.User.personalTotal];
$scope.totamnt = parseInt($scope.User.personalTotal) + parseInt($scope.User.teamTotal);
$scope.User.totalamount = $filter('translate')('totalpending') + ": " + $filter('currency')($scope.totamnt, "");
$scope.User.data = $scope.arr;
};
here is html
<select name="site" ng-model="User.selectedSite" ng-change="getdatalayoutwise(User)">
<option value="">--{{'selectsite_message' | translate}}--</option>
<option ng-repeat= "option in User.site" value="{{option.Layout}}">{{option.Layout}}</option>
</select>
<table ng-table>
<tr>
<th>advisor_name</th>
<th>totalpending</th>
</tr>
<tr ng-repeat="data in User.data | filter : {Layout: User.selectedSite}: true" ng-if="data.dp_inst_pending">
<td class="ui-helper-center"><a ng-click="advisorDetails($index, data, User)">{{data.AdvisorName}}</a></td>
<td>{{data.dp_inst_pending | currency:"₹":0}}</td>
</tr>
</table>
you need to use $scope.$apply() :
$scope.getdatalayoutwise = function(User) {
$scope.$apply(function () {
var total = 0;
var total1 = 0;
for (var i = 0; i < ($scope.User.data).length; i++) {
if($scope.User.data[i].Layout == $scope.User.selectedSite) {
total += parseInt($scope.User.data[i].dp_inst_pending);
$scope.arr.push($scope.User.data[i]);
}
}
...
});
}
https://www.grafikart.fr/formations/angularjs/apply-watch-digest
Change your function to this
$scope.loaddata = function(User) {
$scope.User.data = [];
$scope.User.site = layouts;
AllServices.teamAllDataFunction1(User)
.then(function(response) {
$scope.User.data=response.data;
});
and add a ng-if
<table ng-table ng-if="User.data.length">
<tr>
<th>advisor_name</th>
<th>totalpending</th>
</tr>
<tr ng-repeat="data in User.data | filter : {Layout: User.selectedSite}: true" ng-if="data.dp_inst_pending">
<td class="ui-helper-center"><a ng-click="advisorDetails($index, data, User)">{{data.AdvisorName}}</a></td>
<td>{{data.dp_inst_pending | currency:"₹":0}}</td>
</tr>
</table>
Add this as the first line in getdatalayoutwise () function:
$scope.arr = [];
got it working by just doing following
$scope.safeApply = function(fn) {
var phase = this.$root.$$phase;
if(phase == '$apply' || phase == '$digest') {
if(fn && (typeof(fn) === 'function')) {
fn();
}
} else {
this.$apply(fn);
}
};
$scope.getdatalayoutwise = function(User) {
var total = 0;
var total1 = 0;
for (var i = 0; i < ($scope.User.data).length; i++) {
if($scope.User.data[i].Layout == $scope.User.selectedSite) {
total += parseInt($scope.User.data[i].dp_inst_pending);
$scope.arr.push($scope.User.data[i]);
}
}
...
$scope.safeApply (function () {
$scope.User.data = $scope.arr;
});
};
I'm trying to create a tree structure in the select element. I make indention by filter. As a result this indentation trims after output. Is that possible to disable trimming?
<select id="cat">
<option value="{{category.id}}" ng-repeat="category in categories">{{category | intent}}</option>
</select>
app.filter('intent', function() {
return function(category) {
var INTENT_SIZE = 4;
if (category == null) {
return '';
}
var result = "";
for (var i = 0; i < category.intent * INTENT_SIZE; i++) {
result += " ";
}
result += category.name;
return result;
};
})
For angular 2+ I use this pipe to 'untrim' template spaces :
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'untrim'
})
export class UntrimPipe implements PipeTransform {
transform(value: any, args?: any): any {
return typeof value === 'string' ? value.replace(/\s/g, ' ') : value;
}
}
Related:
Add space to <select> with ng-options
var app = angular.module('app', []);
app.filter('intent', function() {
return function(category) {
var INTENT_SIZE = 4;
if (category == null) {
return '';
}
var result = "";
for (var i = 0, len = category.intent * INTENT_SIZE; i < len; i++) {
result += String.fromCharCode(160);
}
result += category.name;
return result;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
<div ng-init="categories = [{id: 0, name:'bob', intent: 0},
{id: 1, name:'chris', intent: 1},
{id: 2, name:'mike', intent: 2}]"></div>
<select id="cat">
<option value="{{category.id}}" ng-repeat="category in categories">
{{ category | intent }}
</option>
</select>
</div>
You need to use the HTML character to render a space that will not be ignored by the browser.
But then you need to make sure that Angular "trusts" the HTML you are trying to use.
You can accomplish that by changing your markup to:
<select id="cat">
<option value="{{category.id}}" ng-repeat="category in categories" ng-bind-html="category | intent"></option>
</select>
Then change your filter code to:
app.filter('intent', function($sce) {
return function(category) {
var INTENT_SIZE = 4;
if (category == null) {
return '';
}
var result = "";
for (var i = 0; i < category.intent * INTENT_SIZE; i++) {
result += " ";
}
result += category.name;
return $sce.trustAsHtml(result);
};
});
Working Plunkr
NB: I only tested this in Chrome version 41. I'm not sure if all browsers allow having s in the option text.
To get space characters in your options use ng-bind-html to render the space.
<select id="cat">
<option value="{{category.id}}" ng-repeat="category in categories" ng-bind-html="category | intent"></option>
</select>
In your Filter:
app.filter('intent', function($sce) {
return function(category) {
var INTENT_SIZE = 4;
if (category == null) {
return '';
}
var result = "";
for (var i = 0; i < category.intent * INTENT_SIZE; i++) {
result += " ";
}
result += category.name;
return $sce.trustAsHtml(result);
};
});
DEMO
I am working on quiz app. I have add the time out to every question even though user attempts the question or not.
my code in view:
<p ng-repeat="opt in question.answer">
<label ng-show="opt._correct" for="">
<input type="radio" name="questionAnswer" id="opt.id" value=""
ng-click="checkAnswer(1)" />
{{opt.__text}}
</label>
<label ng-hide="opt._correct" for="">
<input type="radio" name="questionAnswer" id="opt.id" value=""
ng-click="checkAnswer(0)" />
{{opt}}
</label>
</p>
my code in controller:
$scope.randomQuestions = function(questionslist){
$scope.randomQuestion = questionslist
[Math.floor(Math.random() * questionslist.
length)];
console.log($scope.quiz);
var item = $scope.quiz.splice($scope.randomQuestion,1)[0];
$scope.questions = new Array();
$scope.questions.push($scope.randomQuestion);
$scope.counter = $scope.counter + 1;
return $scope.questions;
}
$scope.checkAnswer = function(option){
console.log('check answer');
if(option == 1){
console.log($scope.score);
$scope.score = $scope.score + parseInt($scope.level._points_per_question);
console.log($scope.score);
} else{
}
console.log($scope.counter);
if ($scope.counter < parseInt($scope.level._total_questions + 1)){
$scope.randomQuestions($scope.quiz);
} else {
console.log('5 questions');
}
}
$scope.nextLevel = function(){
$scope.total_score = $scope.total_score + $scope.score;
$scope.score = 0;
$scope.counter = 0;
if($scope.level_count == 1){
$scope.level_count = $scope.level_count + 1;
$scope.quiz = $scope.quiz2.question;
$scope.level = $scope.quiz2;
$scope.randomQuestions($scope.quiz);
} else if($scope.level_count == 2){
$scope.quiz = $scope.quiz3.question;
$scope.level = $scope.quiz3;
$scope.randomQuestions($scope.quiz);
$scope.level_count = $scope.level_count + 1;
} else {
$scope.level_count = $scope.level_count + 1;
$scope.result_text();
}
}
$scope.result_text = function(){
$scope.result = parseInt(($scope.total_score * 100) / 400);
for(var k=0; k < $scope.score_rules.length; k++){
if($scope.result >= $scope.score_rules[k]._min_percent){
$scope.score_status = $scope.score_rules[k].__text;
console.log($scope.score_rules[k].__text);
console.log($scope.score_rules[k]);
}
}
}
Can any one suggest how to call time out from view?
Please find below the code
function controller($scope)
{
$scope.showflag = true;
setTimeout(function ()
{
$scope.$apply(function()
{
$scope.showflag = false;
});
}, 1000);
}
You could use CSS transitions or animation to do the actual transition and use ngAnimate to trigger the transitions.
There are a few examples for ngAnimate on this page.
You can try this approach:
Modify your checkAnswer() code and call another function which sets
the timeout/sleep. When the call returns from the timeout function, set a
variable (eg. isVisible) to false and use this variable in ng-show.
Something like this:
So, new ng-show would look like ng-show=" isVisible && opt._correct"
Hi I am using angular progress bar and I want to update every time I click a button.
<div ng-controller="ProgressDemoCtrl">
<br/>
<h3>
Dynamic
<button class="btn btn-sm btn-primary" ng-click="random()" type="button">Randomize</button>
</h3>
<small>
<em>No animation</em>
</small>
<progressbar animate="false" type="success" value="dynamic">
<b>{{dynamic}}%</b>
</progressbar>
</div>
ANGULAR
var ProgressDemoCtrl = function ($scope) {
$scope.max = 00;
$scope.random = function() {
var value = Math.floor((Math.random() * 100) + 1);
var type;
if (value < 25) {
type = 'success';
} else if (value < 50) {
type = 'info';
} else if (value < 75) {
type = 'warning';
} else {
type = 'danger';
}
$scope.showWarning = (type === 'danger' || type === 'warning');
$scope.dynamic = value;
$scope.type = type;
};
$scope.random();
$scope.randomStacked = function() {
$scope.stacked = [];
var types = ['success', 'info', 'warning', 'danger'];
for (var i = 0, n = Math.floor((Math.random() * 4) + 1); i < n; i++) {
var index = Math.floor((Math.random() * 4));
$scope.stacked.push({
value: Math.floor((Math.random() * 30) + 1),
type: types[index]
});
}
};
$scope.randomStacked();
};
as you can see in here what it does when i click the button is filling it up randomly.So what i want to do is be able to click a button and update the progress bar.
If you are using angular bootstrap's progressbar this is very easy. I just made a plunkr for it.
Your HTML
<div ng-controller="ProgressDemoCtrl">
<h3>Progress bar value is {{dynamic}}</h3>
<progressbar max="max" value="dynamic">
<span style="color:black; white-space:nowrap;">
{{dynamic}} / {{max}}
</span>
</progressbar>
<input type="button" ng-click="progress()" value="Click Me To Progress" />
</div>
</body>
</html>
and JS
angular.module('plunker', ['ui.bootstrap']);
var ProgressDemoCtrl = function ($scope) {
$scope.dynamic = 10;
$scope.max = 100;
$scope.progress = function(){
$scope.dynamic = $scope.dynamic + 10;
};
};
I have a table with a fixed width; if the data within the table exceeds the defined width, the user that the ability to scroll left and right as i have a CSS element of overflow: auto;.
What i am trying to do is introduce buttons on either side of the table, so that the user can click on them, and the table will scroll to the left or right.
I have achieved this using an Angular service, but on ng-click, the table only scrolls left or right once. I have a feeling this is because i have used a service, rather than a directive?
Here's my plunker: http://plnkr.co/edit/3rYVry3YtJESCxI190QL?p=preview
On clicking buttons in the above, you'll see a $ error, i do not get this on my project as i am using jQuery too.
HTML:
<body ng-controller="MyController">
<div >
<div class="scrollable my-table" ng-init="sectionIndex = $index; sectionID='my-table'" id="my-table">
<table>
<tr>
<th></th>
<th>Jun</th>
<th>May</th>
<th>Apr</th>
<th>Mar</th>
<th>Feb</th>
<th>Jan</th>
<th>Dec</th>
<th>Nov</th>
<th>Oct</th>
<th>Sep</th>
<th>Aug</th>
<th>Jul</th>
</tr>
<tbody>
<tr>
<th>Preditcion</th>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<th>Recored</th>
<td>10</td>
<td>09</td>
<td>12</td>
<td>13</td>
<td>04</td>
<td>21</td>
<td>14</td>
<td>15</td>
<td>20</td>
<td>25</td>
<td>17</td>
<td>15</td>
</tr>
</tbody>
</table>
</div>
<div class="scroll-btns-area">
<div class="scroll-btns">
<div class="scroll-left" ng-click="scrollLeft(sectionIndex, sectionID)">
<img src="http://www.designofsignage.com/application/symbol/hospital/image/600x600/arrow-left.jpg" width="25px">
</div>
<div class="scroll-right" ng-click="scrollRight(sectionIndex, sectionID)">
<img src="http://www.designofsignage.com/application/symbol/hospital/image/600x600/arrow-right.jpg" width="25px">
</div>
</div>
</div>
</div>
</body>
JS:
var app = angular.module('myApp', []);
app.controller('MyController', function($scope, scrollLeftRightService) {
$scope.scrollLeft = scrollLeftRightService.moveLeft;
$scope.scrollRight = scrollLeftRightService.moveRight;
});
app.factory('scrollLeftRightService', function() {
return {
moveLeft: function(sectionIndex, sectionID) {
console.log("sectionIndex = " + sectionIndex);
console.log("sectionID = " + sectionID);
var scrollViewport_width = $(window).width();
var pixelsToMove = 0;
if (typeof sectionIndex != 'undefined') {
$('#' + sectionID + sectionIndex).scrollLeft(pixelsToMove - 100);
pixelsToMove = pixelsToMove - 100;
if (pixelsToMove <= 0) {
pixelsToMove = 0;
} else {
pixelsToMove = pixelsToMove;
}
} else {
$('#' + sectionID).scrollLeft(pixelsToMove - 100);
pixelsToMove = pixelsToMove - 100;
if (pixelsToMove <= 0) {
pixelsToMove = 0;
} else {
pixelsToMove = pixelsToMove;
}
}
},
moveRight: function(sectionIndex, sectionID) {
console.log("sectionIndex = " + sectionIndex);
console.log("sectionID = " + sectionID);
var scrollViewport_width = $(window).width();
var pixelsToMove = 0;
if (typeof sectionIndex != 'undefined') {
$('#' + sectionID + sectionIndex).scrollLeft(pixelsToMove + 100);
pixelsToMove = pixelsToMove + 100;
if (pixelsToMove >= scrollViewport_width) {
pixelsToMove = scrollViewport_width;
} else {
pixelsToMove = pixelsToMove;
}
} else {
$('#' + sectionID).scrollLeft(pixelsToMove + 100);
pixelsToMove = pixelsToMove + 100;
if (pixelsToMove >= scrollViewport_width) {
pixelsToMove = scrollViewport_width;
} else {
pixelsToMove = pixelsToMove;
}
}
}
};
});
How would i go about removing as service and use directive?
The problem is here:
var pixelsToMove = 0;
...
$('#' + sectionID + sectionIndex).scrollLeft(pixelsToMove - 100);
every time you set pixelsToMove to 0 so then it only scrolls scrollLeft to -100 and you don't increment it by any number
Cheers