We Keep Coding

Ng repeat not working in kenwheeler - Angular Js

Hi I am using kenwheeler slick carousel but when I use ng-repeat on the div i get `listed images'.
What I a doing wrong here ?
<section class="regular slider" style="clear: both" ng-if="slides">
<div ng-repeat="slide in slides">
<img src="{{slide.path}}">
</div>
</section>
I tried the solutions provided here angular slick although its different but still no proper images are being displayed. without ng-repeat it works perfect.
The output is something like this image
My controller
$scope.single_product = function (product_id) {
$http.get('abc',
{headers:
{'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': $rootScope.keyword_auth_token}
})
.success(function (data) {
$scope.product = data;
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: true,
autoplaySpeed: 2000
});
})
.error(function (data) {
console.log(data);
});
};
I am including slick.css slick-theme.css and slick.jshere is the link to all Files

Instead of src Use ng-src ng-src use to get the path of image in angularJS

Go through this link carefully and apply styles
http://kenwheeler.github.io/slick/
remove div that contains ng-repeat
<section class="regular slider" style="clear: both" ng-if="slides">
<img ng-repeat="slide in slides" ng-src="{{slide.path}}">
</section>

Use ng-src
var app = angular.module("myApp", []);
app.controller('myCtrl', function($scope) {
$scope.slides = [{
path: 'https://cloud.githubusercontent.com/assets/1734769/3162502/f49ff416-eb35-11e3-8f47-3a85f8abfd84.png'
}, {
path: 'https://cloud.githubusercontent.com/assets/1734769/3162502/f49ff416-eb35-11e3-8f47-3a85f8abfd84.png'
}, {
path: 'https://cloud.githubusercontent.com/assets/1734769/3162502/f49ff416-eb35-11e3-8f47-3a85f8abfd84.png'
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<section class="regular slider" style="clear: both" ng-if="slides">
<div ng-repeat="slide in slides">
<img ng-src="{{slide.path}}">
</div>
</section>
</div>

Try this:
<div ng-repeat="slide in slides">
<img ng-src="slide.path">
</div>

Check angular-slick README and include all css and js. Add slick to your angular.module [ let say MyApp ] dependency and use slick directives. I think you missed to use slick directives.
<section class="regular slider" style="clear: both" ng-if="slides">
<slick slides-to-show=3 slides-to-scroll=3>
<div ng-repeat="slide in slides">
<img src="{{slide.path}}">
</div>
</slick>
</section>

How to remove underscores from json key value

I have a json file like
{
"Asian_Cities_Countries":[
{"name":"Beijing",
"country":"China"
},
{"name":"Ankara",
"country":"Turkey"
}
],
"European_Cities_Countries":[
{"name":"Paris",
"country":"France"
},
{"name":"Madrid",
"country":"Spain"
}
]
}
It is just a part of a json file the actual json is quite big.
I am fetching this json through angularjs and displaying it my html page as
<div class="panel-group" id="accordion">
<div ng-repeat="key in notSorted(items) track by $index" class="panel panel-default menu-panel" ng-init="value = items[key]" style="margin-bottom:10px;">
<a data-toggle="collapse" data-parent="#accordion" id="menu-link" href="#{{key}}">
<div class="panel-heading panel-types">
<h4 class="panel-title">
{{key}}
</h4>
</div></a>
<div id="{{key}}" class="panel-collapse collapsing menu-items">
<div ng-repeat="item in value">
<div class="row">
<div class="col-sm-12 col-lg-3">
<p class="item-name">
{{item.name}}
</p>
</div>
<div class="col-sm-12 col-lg-3">
<p>{{item.country}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
Now I want to remove underscores from the key value and replace it with blank spaces.How do i do it.
I tried {{key.replace('_',' ')}} . But it removes only the first underscore and not all of them.

var app = angular.module("app",[]);
app.controller("ctrl" , function($scope){
$scope.items = {
"Asian_Cities_Countries":
[
{"name":"Beijing","country":"China"},
{"name":"Ankara","country":"Turkey"}
],
"European_Cities_Countries":
[
{"name":"Paris","country":"France"},
{"name":"Madrid","country":"Spain"}
]
};
});
app.filter('removeUnderscores', [function() {
return function(string) {
if (!angular.isString(string)) {
return string;
}
return string.replace(/[/_/]/g, ' ');
};
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion">
<div ng-repeat="(key,value) in items track by $index" class="panel panel-default menu-panel" ng-init="value = items[key]" style="margin-bottom:10px;">
<a data-toggle="collapse" data-parent="#accordion" id="menu-link" href="#{{key}}">
<div class="panel-heading panel-types">
<h4 class="panel-title">
{{key | removeUnderscores}}
</h4>
</div></a>
<div id="{{key}}" class="panel-collapse collapsing menu-items">
<div ng-repeat="item in value">
<div class="row">
<div class="col-sm-12 col-lg-3">
<p class="item-name">
{{item.name}}
</p>
</div>
<div class="col-sm-12 col-lg-3">
<p>{{item.country}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
try this. use a filter similar this
app.filter('removeUnderscores', [function() {
return function(string) {
if (!angular.isString(string)) {
return string;
}
return string.replace(/[/_/]/g, ' ');
};
}])
and in html
{{key | removeUnderscores}}

Seems you forgot the global modifier, try this:
key.replace(/_/g,' ')
with "g" all occurences should be replaced

The AngularJS Docs specifically state that Angular Expressions don't include regular expressions.
Angular Expressions vs. JavaScript Expressions
Angular expressions are like JavaScript expressions with the following differences:
No RegExp Creation With Literal Notation: You cannot create regular expressions in an Angular expression.
-- AngularJS Developer Guide - Expressions
Instead use a custom filter as recommended by #hadijz
app.filter('removeUnderscores', [function() {
return function(string) {
if (!angular.isString(string)) {
return string;
}
return string.replace(/[/_/]/g, ' ');
};
}])
and in html
{{key | removeUnderscores}}

Just a question. Why aren't you processing the json file/data within a service? This much processing (especially string replacing) isn't meant to be done in either the HTML or the controller in AngularJS.
I'd recommend that you parse the json inside a service and then pass it to the controller. That's usually the best practice..
Please see this JSBIN for reference. Thank you

why ng-repeat not work in directive using angular?

I am trying to use directive in mu page ..I am trying to send data from controller to directive .I am trying to display data using ng-repeat.
here is I am applying the ng-repeat .
<div class="container">
<!--Row with two equal columns-->
<div class="row " ng-repeat='d in data'>
<div class="col-sm-3">
<div class="demo-content">{{d.Location}}</div>
</div>
<div class="col-md-7">
<div class="demo-content bg-alt description-ellipse">{{d.description}}</div>
</div>
<div class="col-md-1">
<div class="demo-content bg-alt">
<button type="button" class="btn btn-default view-now-button">VIEW NOW</button>
</div>
</div>
</div>
</div>
I make a directive like this
.directive('listComponent', function() {
return {
restrict: 'E',
scope: {
data:'='
},
templateUrl: 'list.html',
link: function(s, e, a) {
}
}
})
I am sending data like that
data:'=' and from here <list-component data='h.data'></list-component>
here is my code
http://plnkr.co/edit/Q0GQC2Pik7m25HxQIW8H?p=preview

It should be:
<div class="row " ng-repeat='d in data.jobs'>
in list.html
Or, as per comment:
<list-component data='h.data.jobs'></list-component>
Updated Plunker

Jssor slider is not working with AngularJS

I have a Jssor slider which is running fine with the jQuery version. But when I put the code and JS files into my AngularJS app, it is not working. I get the following error in my console:
Uncaught TypeError: Cannot read property 'currentStyle' of undefined
Is there any specific way to work with Jssor slider in AngularJS?
var app = angular.module('slider', []);
app.controller('sliderCtrl', function($scope){
this.slides = [
{heading: 'movies', number: 115, panel: 'panel-green'},
{heading: 'viewed', number: 252 , panel: 'panel-primary'},
{heading: 'streams', number: 354 , panel: 'panel-yellow'},
{heading: 'length', number: 471 , panel: 'panel-green'},
{heading: 'Spent', number: 589, panel: 'panel-red'},
{heading: 'viewed two', number: 789 ,panel: 'panel-yellow'},
{heading: 'streams two', number: 412 , panel: 'panel-green'},
{heading: 'length two', number: 456, panel: 'panel-red'}
];
$scope.data = this;
});
<div id="wrapper">
<div class="row" id="page-wrapper" ng-controller="sliderCtrl">
<div id="slider1_container">
<div u="slides" class="slides" class="col-lg-2 col-custom-lg-2 col-md-4">
<div ng-repeat="div in data.slides" class="panel {{div.panel}}">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
</div>
<div class="col-xs-12 text-right">
<div class="huge">{{div.number}}</div>
<div >{{div.heading}}</div>
</div>
</div>
</div>
</div>
</div>
<span u="arrowleft" class="jssora03l arrowleft"></span>
<span u="arrowright" class="jssora03r arrowright"></span>
</div>
</div>
I just tried the above code and it is working in my main HTML layout. However, when I put it into my template, it is not working and I encounter the same error.

Try to use ng-class. Or there is problem
with jssor initialization. It's better to create directive for jssor slider. Here is already AngularJS directive for jssor slider. Use it!

Instafeed.js doesn't show images on page

I trying to use instafeed.js for my local site. But I don't understand why images from my account don't show?
My code
Connected instafeed.js and file where I write the script
<script type="text/javascript" src="js/instafeed.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
Section for images
<section class="instagram-wrap">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="instagram-content">
<h3>Latest Photos</h3>
<div class="row photos-wrap">
<div id="inst"></div>
</div>
</div>
</div>
</div>
</div>
</section>
and app.js with instafeed value
$(function() {
var feed = new Instafeed({
get: 'user',
userId: ID,
accessToken: 'Token',
target: 'inst',
links: true,
limit: 8,
useHttp: true,
sortBy: 'most-recent',
resolution: 'standard_resolution',
template: '<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="photo-box">
<div class="image-wrap">
<img src="http:{{image}}"/>
</div>
<div class="description">{{caption}} </div>
</div>
</div>'
});
feed.run();
});

Your code works except for this error regarding your template definition:
SyntaxError: unterminated string literal
Put all the template in one line or use \ at the end of each line to have a multi-line string literal.

Try write the template parameter inline like this:
template: '<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><div class="photo-box"><div class="image-wrap"><img src="http:{{image}}"/></div><div class="description">{{caption}} </div></div></div>'
or on line break insert \