In my HTML I have this img link:
imgURL is set in the controller:
$scope.imgURL = 'img/img_'+$scope.img.id+'.jpg;
With the first changes it works perfectly, but after a while the image doesn't show anymore..??
I read an tried several "solutions" like adding a parameter with random value so it forces to reload, but it didn't work. I log the url in the console and see it changing, so that's not the point.
What can cause the not appearing of the image after a while, it looks so random..?
Your answer is highly appreciated, I'm rather desperate :-/
I don't know about your HTML structure or code but with AngularJS I would do such a image source rotation with something like this. It's simple and works:
angular.module('myApp', [])
.controller('mainController', function($scope, $interval) {
var images = [
'https://placehold.it/350x150',
'https://placehold.it/450x250',
'https://placehold.it/250x250'
];
var i = 0;
$scope.image = images[i];
$interval(function() {
i++;
if (i < images.length) {
$scope.image = images[i];
} else {
$scope.image = images[0];
i = 0;
}
}, 3000, 0);
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="mainController">
<img ng-src="{{image}}">
</body>
</html>
You can apply your image variable manipulation to this easily. The main part in the example above is to use ng-src.
Related
Doing one Google Script APP. With server side method that returns array of string.
getClassRoomList().
Can you please suggest what is wrong with my current HTML? As the success handler is running all well on response. But the ng variable message is not reflecting on page; while the jQuery does populate the table.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script>
var app = angular.module('myApp',[]);
app.controller('mainCtrl',function($scope){
$scope.message = [];
$scope.populateTable = function(array){
//Setting ng variable; but the page doesn't show anything
$scope.message = array;
//Setting the Table by JQuery; it does work.
var table = $('#myTable');
table.empty();
for (var i = 0; i < array.length; i++) {
var item = '<tr><td><div class="classname">' + array[i] +'</div></td></tr>';
table.append(item);
}
};
$scope.mainClick = function(){
$scope.message = $scope.message + 'chirag';
google.script.run.withSuccessHandler($scope.populateTable).getClassRoomList();
};
});
</script>
</head>
<body ng-controller="mainCtrl">
<button ng-click="mainClick()">Proceed</button>
<table id="myTable"></table>
<div ng-bind="message"></div>
</body>
</html>
This works. Thanks. google.script.run.withSuccessHandler((e) => {$scope.populateTable(e); $scope.$apply();}).getClassRoomList();
I know there are other questions about this, but I already tryed and nothing seems to work.
I basically have an angular variable retrieved from an $http.get .
The content is html encoded, like:
Paperwhite – Human Nature
So I have to display it as
<div ng-bind-html="songrel.title.rendered"></div>
To render the html:
Paperwhite – Human Nature
I want to split this value for the - and display only
Human Nature
I tryed something like
<div ng-bind-html="songrel.title.rendered.split('–')[1]"></div>
or
<div ng-bind-html="songrel.title.rendered.split('-')[1]"></div>
Or moving the code in my app.config
$scope.showFirstBr = function(content){
return content.split('–')[1]
};
and then
<div ng-bind-html="showFirstBr(songrel.title.rendered)"></div>
but nothing seems to work. What am I missing?
Try this
var app = angular.module("MyApp", []).controller("MyCtrl", function($scope, $sce) {
var str = 'Paperwhite – Human Nature';
$scope.test = $sce.trustAsHtml(str.split('–')[1]);
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="MyApp" ng-controller="MyCtrl">
<div ng-bind-html="test"></div>
</body>
I've fixed adding this in the controller:
$scope.showFirstBr = function(content){
var c = content.replace('–','-');
return c.split('-')[1]
};
I am learning Angular using W3Schools.
I just modified an example about "Services"... The following is the code:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p><input type="text" ng-model="num"></p>
<h2>{{num}}</h2>
<h1>{{hex}}</h1>
</div>
<p>A custom service whith a method that converts a given number into a hexadecimal number.</p>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl', function($scope, hexafy) {
$scope.num = 200;
$scope.hex = hexafy.myFunc($scope.num);
});
</script>
</body>
</html>
When I update the textbox, the "HEX" part is not updating. Why?
Your hexafy.myFunc is called only once when the controller is initialized, hence only the initial value is converted to hex. If you want a function to be called on the value change of a scope variable in runtime, you need filters. AngularJS has a lot of inbuilt filters that are ready to use.
You can also define a custom filter, just like you define services or controllers.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p><input type="text" ng-model="num"></p>
<h2>{{num}}</h2>
<h1>{{num | hexafy}}</h1>
</div>
<p>A custom filter that converts a given number into a hexadecimal number.</p>
<script>
var app = angular.module('myApp', []);
app.filter('hexafy', function() {
return function (x) {
return Number(x).toString(16); // Also convert the string to number before calling toString.
}
});
app.controller('myCtrl', function($scope) {
$scope.num = 200;
//$scope.hex = hexafy.myFunc($scope.num);
});
</script>
</body>
</html>
Further reading: AngularJS Filters
NOTE: A filter is a good idea if you're gonna be using the hexafy functionality at multiple places in/across views. Otherwise, it is just an overkill and the $scope.$watch method will work fine for you, as described in other answers
$scope.hex is not updating because there're no way for it update itself.
The hexafy.myFunc is called only once when the controller is loaded for the first time.
If you want want the $scope.hex property to change with num, you might need a watch on the num property.
$scope.$watch('num', function(newVal, oldVal) {
$scope.hex = hexafy.myFunc($scope.num); /// or newVal
}
The function passed in $scope.$watch will be called everytime the value of $scope.num changes.
for more info see https://docs.angularjs.org/api/ng/type/$rootScope.Scope (the watch section)
Hope it helps.
No need of a service here, you can simple use $watch on the num. See below code snippet, it will update your ui, I have updated your controller code, please check.
app.controller('myCtrl', function($scope, hexafy) {
$scope.num = 200;
$scope.hex = "some default val";
$scope.$watch('num', function(newValue, oldValue) {
$scope.hex = newValue.toString();
});
});
Your Text box is only bind to 'num'. '$scope.hex is not binded to your text box'. So that it is not update when you typing text. You could use '$watch' on 'num'. Read here
app.controller('myCtrl', function($scope, hexafy) {
$scope.num = 200;
$scope.$watch('num', function() {
$scope.hex = hexafy.myFunc(parseInt($scope.num));
});
});
I try AngularJS for the first time and I'm stuck on a problem.
In the debugger I see that the scope variable '$scope.xml' is correctly updated, but the display needs a second pass (second click) to refresh.
Here is a Plunker to see my problem : http://plnkr.co/edit/9PJsGeDqwjC6nmZHcEJV
I'm looking in the documentation but I can not find track to understand what I did not do well
Thank's a lot for your help !
<!doctype html>
<html ng-app="testAngularJS">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
</head>
<body>
<div ng-controller="testXML">
<div>XML<br/><textarea cols="60" rows="15" ng-model="xml" name="xml">{{xml}}</textarea></div>
<div><button ng-click="listTypDoc()">List !</button><br/>
<br/><button ng-click="clearXML()">Clear</button></div>
</div>
<script type="text/javascript">
var app = angular.module('testAngularJS', []);
app.controller('testXML', function($scope){
$scope.url = 'listeTypDoc.txt';
$scope.listTypDoc = function() {
$.ajax({
type:"GET",
url: $scope.url,
xhrFields: {
withCredentials: false
},
crossDomain: false
}).done(function ( data ) {
$scope.xml = data;
debugger;
});
};
$scope.clearXML = function() {
$scope.xml = '';
};
})
</script>
</body>
</html>
Because you are using a request outside the angularjs, you need to call $apply() after setting the data to the $scope.xml. Take a look in the apply method:
http://docs.angularjs.org/api/ng.$rootScope.Scope
But it's better to use the services angularjs provides instead of using jquery.
Is it possible to render template with AngularJs not on Page, but probably in memory? I need to prepare html to be send as email.
I guess i could render something in hidden div, then in some way assign it content to variable , but for me it looks ugly :(
You can take a look at $compile function: http://docs.angularjs.org/api/ng.$compile
Example:
function MyCtrl($scope, $compile){
// You would probably fetch this email template by some service
var template = '</div>Hi {{name}}!</div></div>Here\'s your newsletter ...</div>'; // Email template
$scope.name = 'Alber';
// this produces string '</div>Hi Alber!</div></div>Here\'s your newsletter ...</div>'
var compiledTemplate = $compile(template)($scope);
};
Sure, you can use the $compile service to render a template. The rendered template will be a DOM node that isn't attached to the DOM tree. And you don't have to attach it to get its content. You could do something like this:
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', '$compile', function($scope, $compile){
var compiled;
$scope.compileTemplate = function() {
var template = '<ul><li ng-repeat="i in [1, 2, 3]">{{i}}</li></ul>';
var linker = $compile(template);
compiled = linker($scope);
}
$scope.sendEmail = function() {
alert("Send: " + compiled[0].outerHTML);
}
}]);
</script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="compileTemplate()">Compile template</button>
<button ng-click="sendEmail()">Send email</button>
</body>
</html>
The reason that I've divided them into two different functions here is because when you compile and link it to the scope, the template isn't filled with data until after the next digest. That is, if you access compiled[0].outerHTML at the end of the compileTemplate() function, it won't be filled (unless you use a timeout...).