Im trying to make a carousel with ui-bootstrap for angularjs, i basically copied/pasted directly from the angular docs, and it works BUT it stops working at the last slide.
It does not come back to the beggining, and the controls stop working, im not getting any errors on the console, it simply stops working
<carousel interval="myInterval">
<slide ng-repeat="slide in carousel" active="slide.active">
<img class="img-responsive" ng-src="app/assets/img/articles/{{slide.img}}" style="margin:auto;">
</slide>
</carousel>
EDIT: I have checked again And it does not stops working at the Last Slide, actually it stops at the SECOND, no matter how many elements there are.
EDIT: I made a test site just with the carousel and still is not working
This is the whole code, it stops at slide 2 and the controls stop working
<html >
<head>
<title>Radiosan Site</title>
<link rel="stylesheet" href="app/assets/lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="app/assets/lib/bootstrap/dist/css/bootstrap-theme.min.css">
<script src="app/assets/lib/jquery/jquery-2.1.0.min.js" ></script>
<script src="app/assets/lib/bootstrap/dist/js/bootstrap.min.js" ></script>
<script src="app/assets/lib/angular/angular.min.js" ></script>
<script src="app/assets/lib/angular/angular-route.min.js" ></script>
<script src="app/assets/lib/angular/angular-animate.min.js" ></script>
<script src="app/assets/lib/angular/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="app/RadiosanApp.js" ></script>
</head>
<body ng-app="RadiosanApp">
<div class="container">
<div ng-controller="MainController">
<div style="height: 305px">
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>
</div>
<div class="row">
<div class="col-md-6">
<a class="btn btn-info" ng-click="addSlide()">Add Slide</a>
</div>
<div class="col-md-6">
Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval">
<br />Enter a negative number to stop the interval.
</div>
</div>
</div>
</div>
<script src="app/controllers/MainController.js"></script>
</body>
var app =
angular.module(
"RadiosanApp", [
"ngRoute",
"ui.bootstrap",
"ngAnimate",
"RadiosanApp.Controllers.MainController"
]);
angular.module("RadiosanApp.Controllers.MainController", [])
.controller("MainController", function($scope) {
$scope.myInterval = 5000;
var slides = $scope.slides = [];
$scope.addSlide = function() {
var newWidth = 600 + slides.length;
slides.push({
image: 'http://placekitten.com/' + newWidth + '/300',
text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
});
};
for (var i=0; i<4; i++) {
$scope.addSlide();
}
});
It's a compatibility problem between ui.bootstrap and ngAnimate .... https://github.com/angular-ui/bootstrap/issues/1350
Related
Angular.JS issue with ng-repeat value from inputs
I'm having an issue with ng-repeat, where I can't see to get the values from the input to show on the UI when submitted.
I'm very new to angular JS, hence why I'm trying to build a simple to do app to learn the basics.
On the newItem.html page, there is a form with a function Add(). There are two inputs for the project and the title. There is a button to add the new to do item.
Once the button is clicked and it runs the Add() function, it should add a new object to the toDoList array with the Project and the Task.
On the homePage.html I want to display a project title and the task details. Later down the line I want to generate the entire row on each click but for now I'm just trying to get the text to change.
I'm obviously missing something obvious here, I've read through the documentation for ng-repeat and ng-model, but just can't seem to grasp it.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="ToDoListApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>To Do App</title>
<script src="angular/angular.min.js"></script>
<script src="angular-route/angular-route.min.js"></script>
<script src="app.module.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="app/assets/css/home.css">
<link href="https://fonts.googleapis.com/css?family=Acme&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/4c765e5630.js" crossorigin="anonymous"></script>
</head>
<body ng-view ng-controller="toDoCtrl">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body>
</html>
homePage.html
<div class="row header">
<div class="col-12">
<h1>DOINGO</h1>
<p>0 Open Tasks</p>
</div>
</div>
<div class="row toDoList">
<div class="row newItem">
<div class="col-2">
<button class="itemComplete btn"><i class="far fa-check-circle fa-2x"></i></button>
</div>
<div class="col-8">
<h4 ng-repeat="Project in ToDoList">{{ToDoList.Project}}</h4>
<p ng-repeat="Task in ToDoList">{{ToDoList.Task}}.</p>
</div>
<div class="col-2">
<button class="btn deleteItem"><i class="far fa-times-circle fa-2x"></i></button>
</div>
</div>
</div>
<div class="row addItemRow">
<div class="col-12 text-center">
<a href="#/newItem"><button type="button" class="btn btn addItem">
<i class="fas fa-plus-circle fa-3x"></i>
</button></a>
</div>
</div>
newItem.html
<div class="row header">
<div class="col-12">
<h1>DOINGO</h1>
</div>
</div>
<div class="row addNewItem">
<form ng-submit='Add()' class="form">
<div class="row projectInput text-center">
<div class="col-12">
<input type="text" ng-model="ToDoList.Project" placeholder="Enter a project title" ng-required>
</div>
</div>
<div class="row taskInput text-center">
<div class="col-12">
<input type="text" ng-model="ToDoList.Task" placeholder="Enter your task details" ng-required>
</div>
</div>
<div class="buttonRow row">
<div class="col-12 text-center">
<button type="submit" class="btn-lg btn-success addItemButton">Add</button>
</form>
<button class="btn-lg btn-danger cancelButton">Cancel</button>
</div>
</div>
</div>
app.module.js
var app = angular.module('ToDoListApp', ['ngRoute']);
app.config(function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when("/", {
templateUrl: "app/home/homePage.html",
controller: "toDoCtrl"
})
.when("/newItem", {
templateUrl: "app/newItem/newitem.html",
controller: "toDoCtrl"
})
.otherwise({
redirectTo: '/'
})
});
//main controller for app functionality
app.controller('toDoCtrl', function ($scope) {
$scope.ToDoList = []
//add the new to do item to the array
$scope.Add = function () {
$scope.ToDoList.push({
Project: $scope.Project,
Task: $scope.Task
});
$scope.Project = '';
$scope.Task = '';
};
});
Images are not displaying on screen for slideshow carousel. In the console under elements, I clearly see the path: but they are not showing on the screen.
Could someone please help with this? I have the images in subfolders and when i click a folder the image paths change correctly. Can't figure this one out. Thank you!
index.html
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="CarouselDemoCtrl">
<div style="height: 305px">
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<div uib-slide ng-repeat="slide in slides">
<img ng-src="{{uri}}/{{currentFolder}}/{{slide}}" style="margin:auto;">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="navbar navbar-default navbar-fixed-botom" role="navigation">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ng-repeat="folder in folders" ng-class="{active:activeFolder(folder)}" ng-click="selectFolder(folder)">
<a ng-href="#{{folder}}">{{folder}}</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
</div>
</body>
</html>
example.js
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
var currentIndex = 0;
$scope.uri = "slides";
$scope.folders = ['cats','dogs'];
$scope.slides = ["1.jpg","2.jpg","3.jpg"];
$scope.currentFolder = $scope.folders[0];
$scope.selectFolder = function (folder) {
$scope.currentFolder = folder;
};
$scope.activeFolder = function (folder) {
return (folder === $scope.currentFolder);
};
});
Carousel is missing an index to find your slides. Add an id property to your slide, starting at 0. This way bootstrap can skip to the next index.
Change your HTML to:
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="CarouselDemoCtrl">
<div style="height: 305px">
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<div uib-slide ng-repeat="slide in slides" index="slide.id">
<img ng-src="{{uri}}/{{currentFolder}}/{{slide.image}}" style="margin:auto;">
</img>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="navbar navbar-default navbar-fixed-botom" role="navigation">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ng-repeat="folder in folders" ng-class="{active:activeFolder(folder)}" ng-click="selectFolder(folder)">
<a ng-href="#{{folder}}">{{folder}}</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>
And your javascript to:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
var currentIndex = 0;
$scope.uri = "slides";
$scope.folders = ['cats','dogs'];
$scope.slides = [{image:"1.jpg", id:0},{image: "2.jpg", id:1},{image:"3.jpg", id:2}];
$scope.currentFolder = $scope.folders[0];
$scope.selectFolder = function (folder) {
$scope.currentFolder = folder;
};
$scope.activeFolder = function (folder) {
return (folder === $scope.currentFolder);
};
});
If the paths are updating and they look correct, then this is unlikely to be an Angular problem. My guess is that the path that's specified is not correct.
From your code I can see that you're specifying a relative path (e.g. slides/cats/1.jpg), but it's relative to the current path. So, if your current path is www.mywebpage.com/foo/bar, it would expect the image to be at www.mywebpage.com/foo/bar/slides/cats/1.jpg. Is that where your image is?
If not, try one of these 2 options.
Add a / to the beginning of the path /slides/cats/1.jpg. That'll get the browser to request the image from www.mywebpage.com/slides/cats/1.jpg
Specify an absolute URL to be super extra sure it's coming from the right place:
See here for how to get the current url: Get current url in Angular
I have been following the docs for ui-bootstrap. And in the section(ui.bootstrap.collapse) they talk about making a collapse function for content when you click a button.
But I cannot seem to make the Collapse seem to work in my code.
What am I missing or doing wrong?
I have looked at other Stacks and have seen that other people use anchor tags instead of button tags. So I don't think that is the issue.
Index HTML
<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="description" content="stuff">
<meta name="keywords" content="stuff">
<meta name="author" content="stuff">
<title> Title</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
<!-- Custom styles -->
<link href="css/style.css" rel="stylesheet">
<link href="css/svg_style.css" rel="stylesheet">
<!--Jquery -->
<script src="lib/jquery/dist/jquery.min.js"></script>
<!-- Angular -->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-route/angular-route.min.js"></script>
<script src="lib/angular-animate/angular-animate.min.js"></script>
<script src="lib/angular-cookies/angular-cookies.min.js"></script>
<!-- Bootstrap -->
<script src="lib/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="lib/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
</head>
<body id="index_body">
<div data-ng-controller="HeaderCtrl">
<div class="top-header" data-ng-include="templateUrl"></div>
</div>
<div class="page [[ pageClass ]]" ng-view autoscroll="true"></div>
<!-- Main JS -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/headerCtrl.js"></script>
<script src="js/controllers/modal.js"></script>
<script src="js/controllers/ResonanceCtrl.js"></script>
<script src="js/controllers/ContactCtrl.js"></script>
<script src="js/controllers/LandingCtrl.js"></script>
<script src="js/controllers/SignInCtrl.js"></script>
<!-- Directives -->
<!-- <script src="js/directives/LandingAnimation.js"></script> -->
<script src="js/jq.js"></script>
</body>
</html>
Landing Page HTML
<div class="col-xs-12 col-sm-12 col-md-5">
<div class="caption">
<h1 class="text-left h-color thin">
Text Header
</h1>
<p class="lead p-color">More Text</p>
<!-- Here is my Toggle Button --> <a class="lead p-color learn-button togglebtn shake shake-rotate" data-ng-click="isCollapsed = !isCollapsed">
<small>
<i class="glyphicon" data-ng-class="{'glyphicon-minus': status.open, 'glyphicon-plus': !status.open}"></i> Learn More
</small>
</a>
</div>
</div>
<div class="hidden-xs hidden-sm col-md-7 col-lg-offset-1 col-lg-6">
<img alt="Image" class="img-responsive center-block" src="images/kip-animation.png" />
</div>
<!--Here is the what I want to collapse -->
<div id="myContent" collapse="isCollapsed" class="row row-offset row-pad" style="margin: 0 30px">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 1</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"><small>Text</small>
</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 2</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"><small>Text</small>
</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 3</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"> <small>Some Text</small>
</p>
</div>
</div>
</div>
<!-- END DROPDOWN-->
App Javascript
var app = angular.module('app', ['ui.bootstrap', 'ngRoute', 'ngAnimate']);
app.config(function($interpolateProvider, $routeProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
$routeProvider
.when('/', {
templateUrl : 'pages/LandingPage.html',
controller : 'LandingCtrl'
})
.otherwise({ redirectTo: '/signin'});
});
Controller Javascript
app.controller('LandingCtrl', function($scope) { // jshint ignore:line
$scope.pageClass = 'page-landing';
$scope.isCollapsed = true;
});
I solved the issue. I was using Jquery before to toggle the display either hidden or shown.
In my Css I had:
myContent {
display: none;
}
Once I deleted that. It worked perfectly fine.
how to use marquee with ng-repeat in angular js?
I tried
<marquee>
<span ng-repeat="item in allItems">
<img src="img/ticker.png" style="padding-top:3px;">{{item.news}}
</span>
</marquee>
But it doesn't seem to work
Also, please suggest some sliding news ticker designed in Angular Way.
you have forgotten the {{ }} marks
<marquee>
<span ng-repeat="item in allItems">
<img src="img/ticker.png" style="padding-top:3px;">{{item.news}}
</span>
</marquee>
EDIT: since you have edited your question to include the solution
marquee is deprecated in HTML5, you should use a CSS solution, or an angular one
here is a simple fiddle with marquee functionality, and a ticker
There is a working example on jsfiddle.
<div ng-app="TestAPP">
<div ng-controller='test'>
<marquee >
<span ng-repeat="item in allItems">
<img src="img/ticker.png" style="paddingtop:3px;"/>
{{item.news}}
</span>
</marquee>
</div>
</div>
https://jsfiddle.net/rod3qo7x/3/
You can try this also
angular.module('angular-news-ticker', [])
.controller('newsCtrl', function ($scope, $interval) {
$scope.start=0;
$scope.totalitem=4;
$scope.news=[{obj:'news1'},{obj:'news2'},{obj:'news3'},{obj:'news4'},{obj:'news5'},{obj:'news6'},{obj:'news1'},{obj:'news2'},{obj:'news3'},{obj:'news4'},{obj:'news5'},{obj:'news6'}];
$scope.totalnumofitem=$scope.news.length;
$scope.next=function () {
if ($scope.totalitem < $scope.totalnumofitem) {
$scope.start += 1;
$scope.totalitem +=1;
}else{
$scope.start=0;
$scope.totalitem=4;
}
}
$scope.prev=function () {
if ($scope.start>0) {
$scope.start -= 1;
$scope.totalitem -=1;
}
}
$interval(moveat, 500);
function moveat() {
if ($scope.totalitem < $scope.totalnumofitem) {
$scope.start += 1;
$scope.totalitem +=1;
}else{
$scope.start=0;
$scope.totalitem=4;
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="angular-news-ticker">
<head>
<title>demo page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body ng-controller="newsCtrl">
<div class="panel panel-default">
<div class="panel-heading">
<span>news</span>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<ul>
<li ng-repeat="new in news.slice(start, totalitem)" >{{new.obj}}</li>
</ul>
</div>
</div>
</div>
<div class="panel-footer">
<ul class="pagination pull-right">
<li><span class="glyphicon glyphicon-chevron-down"></span></li>
<li><span class="glyphicon glyphicon-chevron-up"></span></li>
</ul>
</div>
</div>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
I want to attach angular JS file to my project
<script src="js/global/angular.min.js" type="text/javascript"></script>
<script src="js/global/angular-route.min.js" type="text/javascript"></script>
However, after I did that and went to my app url http://localhost/demo3/ console throws me Error: error:modulerr, however when I opened this file via file path (file:///C:/wamp/www/demo3/index.html) there is no error...
When I followed link to angular DOCS it says that i should load angular-routes. But I even didn't start write anything yet?! I don't have any other js files loaded at this time and routes are attached anyway.
What I did wrong?
EDIT:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Demo v3</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/global/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/custom/common.css" rel="stylesheet" type="text/css"/>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body ng-app="Demo">
<div class="temp_mainFlexCont">
<div class="template_menuFlexCont" ng-controller="LeftMenuController as Menu" ng-class="{'open': Menu.isMenuOpen}">
<left-menu></left-menu>
</div>
<div class="template_contentFlexCont container-fluid">
<section class="filter_tableContainer" ng-controller="UserfilterController as User">
<div class="row clearfix">
<div class="col-xs-12">
<h1>Users</h1>
</div>
</div>
<div class="row filter_tableHeader">
<div class="col-xs-offset-1 col-xs-2">
<a class="filter_tableHeaderHref" href ng-class="{'active':User.fn_setlected_filter('f_name'), 'filter_sortDesc':User.fn_is_descending()}" ng-click="User.fn_set_sorting('f_name')">Name</a>
</div>
<div class="col-xs-2">
<a class="filter_tableHeaderHref" href ng-class="{'active':User.fn_setlected_filter('addr'), 'filter_sortDesc':User.fn_is_descending()}" ng-click="User.fn_set_sorting('addr')">Address</a>
</div>
<div class="col-xs-5">
<a class="filter_tableHeaderHref" href ng-class="{'active':User.fn_setlected_filter('desc'), 'filter_sortDesc':User.fn_is_descending()}" ng-click="User.fn_set_sorting('desc')">Description</a>
</div>
<div class="col-xs-2">
<a class="filter_tableHeaderHref" ng-class="{'active':User.fn_setlected_filter('rate'), 'filter_sortDesc':User.fn_is_descending()}" href ng-click="User.fn_set_sorting('rate')">Rating</a>
</div>
</div>
<div class="row filter_tableTbody">
<div class="col-xs-12">
<div class="row filter_tableRow" ng-repeat="user in User.obj_users">
<div class="col-xs-1">
<div class="filter_imgContainer">
<img class="img-responsive filter_avararImg" ng-src="img/avatars/{{user.img}}" alt=""/>
</div>
</div>
<div class="col-xs-2">
{{user.f_name.firstname}} {{user.f_name.lastname}}
</div>
<div class="col-xs-2">
{{user.addr.line_1}}<br>
<span class="small">{{user.addr.line_2}}</span>
</div>
<div class="col-xs-5">
<p class="filter_tableDesc">
{{user.desc}}
</p>
</div>
<div class="col-xs-2">
<span class="filter_rateStars" ng-repeat="a in User.fn_return_array_by_integer(5)| limitTo: user.rate track by $index">
★
</span>
<span class="filter_rateStars notActive" ng-repeat="a in User.fn_return_array_by_integer(5)| limitTo: 5 - user.rate track by $index">
☆
</span>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- global JS -->
<script src="js/global/angular.min.js" type="text/javascript"></script>
<script src="js/global/angular-route.min.js" type="text/javascript"></script>
<!-- custom JS -->
<script src="js/custom/common.js" type="text/javascript"></script>
<script src="js/custom/filters.js" type="text/javascript"></script>
</body>
</html>
JS Custom file
(function () {
var app = angular.module('Demo', [
'ngRoute'
]);
app.controller('TemplateController', function () {
});
app.directive('leftMenu', function () {
return{
restrict: 'E',
templateUrl: 'views/left-menu.html'
};
});
app.controller('UserfilterController', function () {
this.int_male_counter = this.int_female_counter = 5;
this.str_sort_by = {
prop_name: 'f_name',
order: 'asc'
};
this.obj_users = new Users(this.int_male_counter, this.int_female_counter).list;
this.fn_set_sorting = function (str) {
if (this.str_sort_by.prop_name === str) {
this.str_sort_by.order = this.str_sort_by.order === 'des' ? 'asc' : 'des';
} else {
this.str_sort_by.order = 'asc';
this.str_sort_by.prop_name = str;
}
this.obj_users.sortByObjKeyVal(this.str_sort_by.prop_name, this.str_sort_by.order);
};
this.fn_setlected_filter = function (str) {
return str === this.str_sort_by.prop_name;
};
this.fn_is_descending = function () {
return this.str_sort_by.order === 'des';
};
this.fn_return_array_by_integer = function (int) {
return new Array(int);
};
});
app.controller('LeftMenuController', function () {
this.isMenuOpen = true;
});
})();