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>
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 am using ui-bootstrap angularjs for generating slide down's and added a button and click event, with alert message in controller but I don't get any alert or console log.
I am facing problem in generating alert on click of button which is being loaded using template-url as you can see in code below. I am sharing my sample code below.
angular.module('ui.bootstrap.demo', [ 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
console.log("CTRL LOADED");
$scope.alertMsg = function(){
alert('hejd');
}
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.2.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="AccordionDemoCtrl">
<script type="text/ng-template" id="group-template.html">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#fa39c3">
<button ng-click="alertMsg()">Btn</button>
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
<span uib-accordion-header ng-class="{'text-muted': isDisabled}">
{{heading}}
</span>
</a>
</h4>
</div>
<div class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" style="text-align: right" ng-transclude></div>
</div>
</div>
</script>
<uib-accordion close-others="oneAtATime">
<div uib-accordion-group class="panel-default" is-open="status.isCustomHeaderOpen" template-url="group-template.html">
<uib-accordion-heading>
Custom template with custom header template <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isCustomHeaderOpen, 'glyphicon-chevron-right': !status.isCustomHeaderOpen}"></i>
</uib-accordion-heading>
World
</div>
</uib-accordion>
</div>
</body>
</html>
I do get the log "CTRL LOADED". But I am not getting alert message when I click.
I believe the panel creates its own scope so you need to call the parent scope to get the alert message like so:
<div ng-controller="AccordionDemoCtrl">
<script type="text/ng-template" id="group-template.html">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#fa39c3">
<button ng-click="$parent.alertMsg()">Btn</button>
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
<span uib-accordion-header ng-class="{'text-muted': isDisabled}">
{{heading}}
</span>
</a>
</h4>
</div>
<div class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" style="text-align: right" ng-transclude></div>
</div>
</div>
</script>
Here is a Plunker
I've looked at ng-view according to
https://docs.angularjs.org/api/ngRoute/directive/ngView
However, I'm very unsure as to how I would incorporate the above with the dropdown menu.
Here's a few screenshots showing what the website currently looks like for reference.
imgur.com/a/NUVEe
Here's the code
index.html
<html ng-app="app">
<head>
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body ng-controller="MainController">
<nav class="navbar navbar-default">
<div class="container"> <!-- top intro part -->
<div class="navbar-header">
<a class="navbar-brand" href="#/"> OPENCV 3.0.0</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
<ng-view>
<div class="row"> <!-- Dropdown menu -->
<div class="col-md-20">
<div id="main">
<form class="form-horizontal" role="form">
<label class="control-label col-md-2">Filter List:</label>
<div class="col-md-5">
<select class="form-control"
ng-options="filter for filter in filters"
ng-model="filter"
ng-change="GoToOpenCVpage(filter)">
<option value=""> Select Filter</option>
</select>
</div>
</form>
</div>
</div>
</div>
</ng-view>
<div id = "content"> <!-- stuff showing opencv filter goes in here -->
<ng-view>
</ng-view>
</div>
<script src="js/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
makegray.html (the html content I want to inject into index.html)
<html ng-app="app">
<head>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
</head>
<body ng-controller="MainController">
<nav class="navbar navbar-default">
<div class="container"> <!-- top intro part -->
<div class="navbar-header">
<a class="navbar-brand" href="#/"> MAKE GRAY</a>
</div>
</div>
</nav>
<form action="../php/makegray.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
<script src="js/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
angularJS
var app = angular.module("app", ["ui.bootstrap"]);
/*app.factory("API", function($http) {
return {
getFilters: function(callback) {
$http.get("filters.php").success(callback);
}
}
});*/
app.controller("MainController", function($scope) {
$scope.ListOfOpenCV = {}; // declare array
// $scope.ListOfOpenCV.filter = "";
$scope.filters = ["MakeGray", "Sobel"];
//$scope.ListOfOpenCV.filter = $scope.filters[0];
$scope.GoToOpenCVpage = function(filter){
if(filter === "MakeGray"){
// window.location("pages/Canny.html");
window.open("pages/MakeGray.html", "_blank","height = 400, width = 700");
}
};
});
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;
});
})();