I'm using 'Angular Slick' to make a carousel, everthings working as I wanted, except for 'autoplaySpeed' property, when I use it, it is not working, in the docs there is nothing related to...
HTML:
<slick init-onload="false" slick-apply='slickApply' autoplaySpeed="3000" data="dataLoaded" autoplay="true" slides-to-show="1" dots="true">
<div ng-repeat="item in carouselItems">
<h2 class="starter-benefits__title">{{item.title | translate}}</h2>
<h6 class="starter-benefits__info">{{item.message | translate}}</h6>
</div>
</slick>
JS.
angular.module('app')
.controller('initCtrl', function($scope, $timeout) {
$scope.carouselItems = [];
$timeout(function() {
$scope.carouselItems = [
{
title: 'LABEL_INIT_CAROUSEL_FIRST_TITLE',
message: 'LABEL_INIT_CAROUSEL_FIRST_MESSAGE'
},
{
title: 'LABEL_INIT_CAROUSEL_SECOND_TITLE',
message: 'LABEL_INIT_CAROUSEL_SECOND_MESSAGE'
},
{
title: 'LABEL_INIT_CAROUSEL_THIRD_TITLE',
message: 'LABEL_INIT_CAROUSEL_THIRD_MESSAGE'
},
{
title: 'LABEL_INIT_CAROUSEL_FOURTH_TITLE',
message: 'LABEL_INIT_CAROUSEL_FOURTH_MESSAGE'
}
];
$scope.dataLoaded = true;
}, 2000);
});
Hope guys can help me figure out what's going on.
Thank you.
Related
My below given response comes as encoded format , i am decoding it using a filter and displaying value in my html . But I need to display them as html in my view. So trustAsHtml has been used. but the problem here is when I use trustAsHtml my decoding doesn't occur.it shows exception unexpected token.
$scope.res= "data": [
{
"jd": "<p>this jd1</p>"
},
{
"jd": "<li>this jd2</li>"
},
{
"jd": "<ul>this jd3</ul>"
},
{
"jd": "<p>this jd4</p>"
}
]
}
JS:
$scope.trustAsHtml = $sce.trustAsHtml;
Filter:
app.filter('decodeFilter', function() {
return function(input) {
return decodeURIComponent(unescape(input));
};
});
Html:
<div ng-repeat="item in res">
<div ng-bind-html ="trustAsHtml(item.jd | decodeFilter)">
</div>
There seems to be issue with your ng-repeat object res, you should use res.data as per your code. I have made some correction from your custom filter as well. Also you can check this plunker for your given working example.
Template:
<div ng-repeat="item in res.data">
<div ng-bind-html ="item.jd | decodeFilter"></div>
</div>
Controller:
app.controller('MainCtrl', function($scope) {
$scope.res = {
"data": [ {
"jd": "<p>this jd1</p>"
}, {
"jd": "<li>this jd2</li>"
}, {
"jd": "<ul>this jd3</ul>"
}, {
"jd": "<p>this jd4</p>"
}]
};
});
app.filter('decodeFilter', function($sce) {
return function(input) {
return $sce.trustAsHtml(decodeURIComponent(input));
};
});
Note: The unescape() function was deprecated in JavaScript version 1.5. Use decodeURI() or decodeURIComponent() instead.
Which means unescape is equal to decodeURLComponent.
have you tried to enable it in the app.config with the $sceProvider like this?
angular
.module('myapp')
.config(["$locationProvider", "$sceProvider",function config($locationProvider, $sceProvider) {
$sceProvider.enabled(true);
$locationProvider.html5Mode(true);
});
I have this template:
<li ng-repeat="item in results.items track by item.id"><ul result-list-line></ul></li>
Sometimes I get Duplicates in a repeater are not allowed. Basically a back-end problem, but I need to handle it in the FE.
Now, I know it's been discussed before: I can loop over the data and catch duplicate myself or I can bypass it by using track by $index. I don't want to do either – I want to catch the Angular error and handle it (display an error message, basically). How do I do that?
Here's my version to Stepan Kasyanenko's answer below:
.factory('$exceptionHandler', [ '$injector', function ( $injector ) {
return function (exception, cause) {
// Preventing circular reference when using $rootScope
var $rootScope = $injector.get('$rootScope');
var msg = exception.message;
// Still have the usual console error - extend instead of replace
var $log = $injector.get('$log');
$log.error.apply($log, arguments);
//catching ngRepeat duplicates
if ( msg.search("ngRepeat:dupes") > -1 ) {
msg = "Duplicate entries were sent from the server"
}
// Not always you get a cause string, but if so you might want to add it to the message
if ( cause ) {
msg += ". Cause: "+cause;
}
// No matter what I did, I couldn't inject any factory that uses $rootScope, so I used custom event instead
$rootScope.$emit("angularError", msg);
};
}])
You can use $exceptionHandler.
Live example on jsfiddle.
angular.module('ExampleApp', [])
.controller('ExampleController', function($scope) {
$scope.countries = [{
countryName: 'United States',
countryCode: 1
}, {
countryName: 'Canada',
countryCode: 2
}, {
countryName: 'Bahamas',
countryCode: 3
}, {
countryName: 'Chile',
countryCode: 4
}, {
countryName: 'Chile',
countryCode: 4
}];
})
.factory('$exceptionHandler', function() {
return function(exception, cause) {
alert(exception)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
<div ng-controller="ExampleController">
<label>Country:</label>
<div ng-repeat="country in countries track by country.countryCode">
{{country.countryName}}
</div>
</div>
</div>
UPDATED
$exceptionHandler handle also custom error.
angular.module('ExampleApp', [])
.controller('ExampleController', function($scope) {
$scope.countries = [{
countryName: 'United States',
countryCode: 1
}, {
countryName: 'Canada',
countryCode: 2
}, {
countryName: 'Bahamas',
countryCode: 3
}, {
countryName: 'Chile',
countryCode: 4
}, ];
$scope.raiseError = function() {
throw "my raiseError";
}
$scope.addBadElement = function() {
$scope.countries.push({
countryName: 'Chile',
countryCode: 4
});
}
})
.factory('$exceptionHandler', function() {
return function(exception, cause) {
alert(exception);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
<div ng-controller="ExampleController">
<label>Country:</label>
<button ng-click="raiseError()">
raise Error
</button>
<button ng-click="addBadElement()">
Add Bad Country
</button>
<div ng-repeat="country in countries track by country.countryCode">
{{country.countryName}}
</div>
</div>
</div>
I have found many posts about how ng-repeat does not play well with objects, and expects the data to be an array, but my data is an array, it just happens to have a single object(list2). I get list1 fine, and everything works perfect. According to everything that I have found, list2 should work. Anyone know why it doesn't?
Data coming from my factory:
(function(){
var Factory = function(){
var model = {
list1: [
{
id: "1_1",
type: "header",
headerText: "1_1 Header",
secondaryHeaderText: "",
paragraphText: "1_1 Paragraph",
image: ""
},
{
id: "1_2",
type: "header",
headerText: "Header 1_2",
secondaryHeaderText: "",
paragraphText: "1_2 Paragraph",
image: ""
},
{
id: "1_3",
type: "header",
headerText: "1_3 Header1",
secondaryHeaderText: "1_3 Header2",
paragraphText: "",
image: ""
}
],
list2: [
{
id: "2_1",
type: "link",
headerText: "2_1 Header",
paragraphText: "2_1 Paragraph",
linkText: "2_1 Link Text",
image: ""
}
]
};
var factory = {};
factory.getList1 = function(){
return model.list1;
};
factory.getList2 = function(){
return model.list2;
};
return factory;
};
angular.module('designApp').factory('Factory', Factory);
}());
HMTL
<div>
<!--works perfectly fine -->
<div ng-repeat="item in list1" ng-include="'app/partial/list1.html'"></div>
</div>
<div>
<div ng-repeat="item in list2" ng-include="'app/partial/list2.html'"></div>
</div>
Controller
(function(){
var Controller = function($scope, Factory){
$scope.list1 = [];
$scope.list2 = [];
function init(){
$scope.list1 = Factory.getList1();
$scope.list2 = Factory.getList2();
}
init();
};
Controller.$inject = ['$scope', 'Factory'];
angular.module('designApp')
.controller('Controller', Controller);
}());
This is all that is in list2.html. Does not render any of the model data but renders the html tags, and throws no errors.
<h2>{{list2.headerText}}</h2>
<p>{{list2.paragraphText}}</p>
Thanks in advance for any help!
You have to replace
<h2>{{list2.headerText}}</h2>
<p>{{list2.paragraphText}}</p>
by
<h2>{{item.headerText}}</h2>
<p>{{item.paragraphText}}</p>
working plunkr:
https://plnkr.co/edit/FC5KPpOl7gsmfva63veq?p=preview
I'm looking for a way to take the hard coded "Character" data in my Angular app and load it from a separate json file.
I have a controller for the ($http) thats worked in other apps, I'm just not sure how to strip, pull and access these character names and properties from a JSON file. Any help would be appreciated.
<body>
<div class="container">
<div ng-app="polarisApp">
<h1>The Other Guys</h1>
<h3>Custom Events in Nested Controllers</h3>
<div ng-controller="Characters">
<div class="lList"> <span ng-repeat="name in names" ng-click="changeName()">{{name}}</span>
</div>
<div class="cInfo">
<div ng-controller="Character">
<label>Name:</label>{{currentName}}
<br>
<label>Job:</label>{{currentInfo.job}}
<br>
<label>Weapon:</label>{{currentInfo.weapon}}
<br> <span ng-click="deleteChar()">Delete</span>
</div>
</div>
</div>
</div>
<script src="http://code.angularjs.org/1.3.0/angular.min.js"></script>
<script src="angular.js"></script>
<script>
angular.module('polarisApp', [])
.controller('Characters', function ($scope) {
$scope.names = ['Alan', 'Terry', 'Gene', 'Sheila', 'Danson', 'Highsmith', 'Bob'];
$scope.currentName = $scope.names[0];
$scope.changeName = function () {
$scope.currentName = this.name;
$scope.$broadcast('CharacterChanged', this.name);
};
$scope.$on('CharacterDeleted', function (event, removeName) {
var i = $scope.names.indexOf(removeName);
$scope.names.splice(i, 1);
$scope.currentName = $scope.names[0];
$scope.$broadcast('CharacterChanged', $scope.currentName);
});
})
.controller('Character', function ($scope) {
$scope.info = {
'Alan': {
weapon: 'Calculator',
job: 'Police Officer'
},
'Terry': {
weapon: 'Gun',
job: 'Police Officer'
},
'Gene': {
weapon: 'None',
job: 'Police Captain'
},
'Sheila': {
weapon: 'None',
job: 'M D'
},
'Danson': {
weapon: 'Gun',
job: 'Police Detective'
},
'Highsmith': {
weapon: 'Gun',
job: 'Police Detective'
},
'Bob': {
weapon: 'None',
job: 'Police Accountant'
}
};
$scope.currentInfo = $scope.info['Alan'];
$scope.$on('CharacterChanged', function (event, newCharacter) {
$scope.currentInfo = $scope.info[newCharacter];
});
$scope.deleteChar = function () {
delete $scope.info[$scope.currentName];
$scope.$emit('CharacterDeleted', $scope.currentName);
};
});
</script>
</body>
This is the ($http) controller I wrote.
angular.module('polarisApp')
.controller('MainCtrl', function ($scope, $http) {
$http.get('character.json')
.success(function(data) {
$scope.characterStatus = data.caracterStatus;
});
You can try this
var info = null;
$http.get('character.json').success(function(data) {
info = data;
});
The response from the $http.get request will be the object contained in content.json file. If you need to access Alan's job, you can use info.Alan.job and so on.
I got it working with this controller:
App.controller('CharacterCtrl', function($scope, $http) {
$http.get('characters.json')
.then(function(res){
$scope.characters = res.data;
}); });
Thank you very much for your feedback. I haven't seen that variable you used in any similar controllers. I think I should look into it--Might be missing out on a better way to $http. Thanks.
I cant seem to make my angularjs code work with the kik api:
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', function($scope) {
$scope.go = function() {
kik.send({
title: 'message title',
text : 'Message body',
data : {
color: 'green',
size: 'one' }
});
}
//kik.message is exactly what was provided in kik.send
//in this case: { color: 'green', size: 'one' }
if(kik.message) {
$scope.result = kik.message;
}
});
//html ng-app="my-app"
<div controller="MainCtrl">
<li ng-repeat="todo in result">
{{todo.color}} {{todo.size}}
</li>
</div>
$scope.result should hold the data that was inside "api.oppened", but it seems like I made a mistake.
link to API
Looks like your ng-repeat expects result to be an array but it is instead { color: 'green', size: 'one' }. So when you do todo in result, todo isn't the object that you expect it to be.
Simply change your assignment to result:
if (kik.message) {
$scope.result = [ kik.message ];
}