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 = '';
};
});
Hi I'm new with Web API's and I'm working with AngularJS and Web API I'm trying to upload an image into a Web API but when I click the button to send the image it gives me an error
I already did the method GET and it shows me all the images that are in that web API but it doesn't work the method POST
here is my code
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
<link rel="stylesheet" href="css/bootswatch.min.css">
</head>
<body>
<div ng-app="MarcasApp" >
<div ng-controller="MarcaController">
<div class="container">
<h2>Muestra</h2>
</div>
<input type="button" class="btn btn-info" value="Todos" ng-click="getTodos()">
<form name="formulario" method="post" action="" enctype="multipart/form-data">
<div class="container">
<label for="caption">Id:</label>
<input type="input" class="form-control" ng-model="txtId"/>
</div>
<div class="container">
<label for="caption">Cargar Marcar:</label>
<input type="file" ng-files="getTheFiles"/>
</div><br>
<div class="container">
<input type="submit" value="Enviar Marca" class="btn btn-success"
ng-click="btnGuardar()"/>
</div><br>
<div class="container">
Mensaje:{{msgGuardar}}
</div>
</form>
<div class="panel panel-info">
<ul class="list-group" ng-repeat="marca in marcas">
<li class="list-group-item">
<img src="{{marca.imagen}}">
{{marca.marca1}} + {{marca.marcaId}}
</li>
</ul>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="MarcaJson.js"></script>
</body>
</html>
MarcaJson.js
var app = angular
.module("MarcasApp", [])
.controller("MarcaController", function($scope, $http){
$scope.getTodos =function(){
var apiUrl = 'http://tiendawebapi.azurewebsites.net/api/marcas/';
$http.get(apiUrl).then(function(response){
$scope.marcas = response.data;
});
};
$scope.btnGuardar = function(){
var datos = {
id: $scope.txtId,
imagen: $scope.getTheFiles
}
var apiUrl = 'http://tiendawebapi.azurewebsites.net/api/marcas/';
$http.post(apiUrl, JSON.stringify(datos)).then(function(response){
if (response.statusText == Created){
$scope.msgGuardar = "Marca Guardada";
}
}, function(error){
$scope.msgGuardar = "Ocurrio un error " + error.statusText;
});
};
});
UPDATE I've added full HTML output at bottom.
2nd UPDATE At the very bottom is how I've defined my angular module in file "app.js"
I have an ng-click that I'm trying to use to activate an ng-show elsewhere.
<div class="img_div" ng-click="showSwiper = ! showSwiper">
<img class="modal_img img_screenings" src="images/producersclub.jpg">
<p class="movie_p" align="center">EXPANDED METAL, 11am</p>
<p class="screenings_p" align="center">THE PRODUCERS CLUB</p>
<p class="location_p" align="center">PHILIP K. DICK FILM FESTIVAL</p>
<p class="date_p" align="center">May 29, 2017</p></div>
</div>
<div class="swiper-container" ng-show="showSwiper">
....
</div
When I click the div img_div, nothing appears to happen and element swiper-container does not appear.
I didn't think I needed to add anything to my controller to make this work. My controller:
(function () {
angular
.module('app')
.controller('screeningsController', Controller);
function Controller($scope, $location, $anchorScroll) {
$scope.scrollTo = function(id) {
$location.hash(id);
$anchorScroll();
}
$scope.seo = {
metaTitle : '', metaDescription : ''
};
$scope.$parent.seo = {
metaTitle : 'Screenings',
metaDescripton: 'A list of all upcoming screenings.'
};
}
}
)();
Is there anything that needs to be done to the controller to make this work?
<html ng-app="app" class="ng-scope">
<head>
<style type="text/css">#charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>
<meta charset="UTF-8">
<title>title</title>
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1">
<!--prerender.io & Facebook-->
<meta name="fragment" content="!">
<meta property="og:url" content="">
<meta property="og:title" content="Screenings">
<meta property="og:description" content="">
<meta property="og:image" content="">
<!--angular hash correction-->
<base href="/">
<!--swiper-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css" type="text/css">
<!--main-->
<link rel="stylesheet" href="css/style.css" type="text/css">
<!--swiper style-->
<link rel="stylesheet" href="css/swiper.css" type="text/css">
</head>
<body>
<!-- Swiper -->
<div class="swiper-container swiper-container-horizontal ng-hide" ng-show="showSwiper">
<div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);">
<div class="swiper-slide swiper-slide-active" data-hash="the-producers-club" style="width: 1280px; margin-right: 30px;">
<img class="swiper_img" src="images/producersclub.jpg">
</div>
<div class="swiper-slide swiper-slide-next" data-hash="hummingbird-studios" style="width: 1280px; margin-right: 30px;">
<img class="swiper_img" src="images/CHI.png">
</div>
<div class="swiper-slide" data-hash="anthology-film-archives" style="width: 1280px; margin-right: 30px;">
<img class="swiper_img" src="images/large.jpg">
</div>
<div class="swiper-slide" data-hash="red-hook-vision-center" style="width: 1280px; margin-right: 30px;">
<img class="swiper_img" src="images/13119742_10209232217392526_8176078770950589764_o.jpg">
</div>
<div class="swiper-slide" data-hash="latino-sports-club" style="width: 1280px; margin-right: 30px;">
<img class="swiper_img" src="images/12419141_10208971503394839_6519551385362745616_o (1).jpg">
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-fraction" style="display: none;">
<span class="swiper-pagination-current">1</span> / <span class="swiper-pagination-total">5</span></div>
<!-- Add Arrows -->
<div class="swiper-button-next fader" style="display: none;">
</div>
<div class="swiper-button-prev fader swiper-button-disabled" style="display: none;"></div>
</div>
<!--angular partials-->
<!-- uiView: --><ui-view class="ng-scope">
<!--HERE ARE THE NG-CLICKS-->
<div id="screenings" class="ng-scope">
<div class="img_div" ng-click="showSwiper = !showSwiper">
<img class="modal_img img_screenings" src="images/producersclub.jpg">
<p class="movie_p" align="center">EXPANDED METAL, 11am</p>
<p class="screenings_p" align="center">THE PRODUCERS CLUB</p>
<p class="location_p" align="center">PHILIP K. DICK FILM FESTIVAL</p>
<p class="date_p" align="center">May 29, 2017</p>
</div>
<div class="img_div" ng-click="showSwiper = !showSwiper">
<img class="modal_img img_screenings" src="images/CHI.png">
<p class="movie_p" align="center">EXPANDED METAL, 9pm</p>
<p class="screenings_p" align="center">HUMMINGBIRD STUDIOS</p>
<p class="location_p" align="center">CHICAGO, IL</p>
<p class="date_p" align="center">April 21, 2017</p>
</div>
<div class="img_div" ng-click="showSwiper = !showSwiper">
<img class="modal_img img_screenings" src="images/large.jpg">
<p class="movie_p" align="center">EXPANDED METAL, 6pm</p>
<p class="screenings_p" align="center">ANTHOLOGY FILM ARCHIVES</p>
<p class="location_p" align="center">NEW YORK, NY</p>
<p class="date_p" align="center">September 14, 2016</p>
</div>
<div class="img_div" ng-click="showSwiper = !showSwiper">
<img class="modal_img img_screenings" src="images/13119742_10209232217392526_8176078770950589764_o.jpg">
<p class="movie_p" align="center">EXPANDED METAL, 8pm</p>
<p class="screenings_p" align="center">RED HOOK VISION CENTER</p>
<p class="location_p" align="center">BROOKLYN, NY</p>
<p class="date_p" align="center">May 19, 2016</p>
</div>
<div class="img_div" ng-click="showSwiper = !showSwiper">
<img class="modal_img img_screenings" src="images/12419141_10208971503394839_6519551385362745616_o (1).jpg">
<p class="movie_p" align="center">EXPANDED METAL, 11:15pm</p>
<p class="screenings_p" align="center">LATINO SPORTS CLUB</p>
<p class="location_p" align="center">BROOKLYN, NY</p>
<p class="date_p" align="center">April 1, 2016</p>
</div>
</div>
<script class="ng-scope">
swiper.update();
//clear any pre-loaded slides
swiper.removeAllSlides();
//store images in swiper
$(".modal_img").each(function(i,x) {
var closest_venue = ($(this).closest('.img_div').find('.screenings_p').text());
closest_venue = closest_venue.replace(/\s+/g, '-').toLowerCase();
console.log(closest_venue);
swiper.appendSlide('<div class="swiper-slide" data-hash="' + closest_venue + '"><img class="swiper_img" src="' + $(this).attr("src") + '"/></div>');
})
//open swiper
//click an image
$(".img_div").click(function() {
//find position within swiper sliders
var position = $(this).index();
//show swiper
//$('.swiper-container').css('display', 'inline');
swiper.update();
//jump to position in swiper
swiper.slideTo(position,0,false );
});
//click events
//attach click event to previous button
$(".swiper-button-prev").click(function(){
$(".swiper-button-prev").data('clicked', true);
});
//attach click event to next button
$(".swiper-button-next").click(function(){
$(".swiper-button-next").data('clicked', true);
});
//attach click event to swiper image
$(".swiper_img").click(function(){
$(".swiper_img").data('clicked', true);
});
//close swiper
//click container
$(".swiper-container").click(function() {
//if previous button was clicked, do nothing
if($('.swiper-button-prev').data('clicked')) {
//if next button was clicked, do nothing
} else if($('.swiper-button-next').data('clicked')) {
//if image was clicked, do nothing
} else if($('.swiper_img').data('clicked')) {
//close container
} else
//$('.swiper-container').css('display', 'none');
//reset click events
$(".swiper-button-prev").data('clicked', false);
$(".swiper-button-next").data('clicked', false);
$(".swiper_img").data('clicked', false);
});
</script>
</ui-view>
</body>
</html>
Definition of angular module in app.js
(function () {
angular
.module('app', ['ui.router'])
.config(config)
.run(run);
etc.
Try below code
ng-click="showSwiper = !showSwiper"
And also post your full HTML and controller
Try this:
function Controller($scope, $location, $anchorScroll) {
$scope.showSwiper = false;
$scope.scrollTo = function(id) {
$location.hash(id);
$anchorScroll();
}
.... // more code
Now the variable is defined and the rest should work
please check working plnkr for this your issue
https://plnkr.co/edit/p7ZaebihQjSZ1Yvi9upM?p=preview
HTML
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="screeningsController">
<div class="img_div" ng-click="showSwiper = !showSwiper">
<img class="modal_img img_screenings" src="images/producersclub.jpg">
<p class="movie_p" align="center">EXPANDED METAL, 11am</p>
<p class="screenings_p" align="center">THE PRODUCERS CLUB</p>
<p class="location_p" align="center">PHILIP K. DICK FILM FESTIVAL</p>
<p class="date_p" align="center">May 29, 2017</p></div>
</div>
<div class="swiper-container" ng-show="showSwiper">
Display section
</div>
</body>
</html>
Js
var app = angular.module('plunker', []);
(function () {
angular
.module('plunker')
.controller('screeningsController', Controller);
function Controller($scope, $location, $anchorScroll) {
$scope.scrollTo = function(id) {
$location.hash(id);
$anchorScroll();
}
$scope.seo = {
metaTitle : '', metaDescription : ''
};
$scope.$parent.seo = {
metaTitle : 'Screenings',
metaDescripton: 'A list of all upcoming screenings.'
};
}
}
)();
Your code is working fine. May be issue is with your HTML Structure. you have one extra closing div in the HTML you posted.
Working Snippet
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.showSwiper = false;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="img_div" ng-click="showSwiper = ! showSwiper">
<img class="modal_img img_screenings" src="">
<p class="movie_p" align="center">EXPANDED METAL, 11am</p>
<p class="screenings_p" align="center">THE PRODUCERS CLUB</p>
<p class="location_p" align="center">PHILIP K. DICK FILM FESTIVAL</p>
<p class="date_p" align="center">May 29, 2017</p></div>
<div class="swiper-container" ng-show="showSwiper">
....
</div>
</div>
i am trying to use $http GET requests but it is not working and i don't know what is wrong with it and am not also getting any errors in the console ,this is the whole code that am using
<!doctype html>
<html lang="en" ng-app="twitchApp">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TwichTv</title><!-- End of Title -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container contentContainer">
<div class="contentWrapper">
<div class="innerContent">
<!-- Nav tabs -->
<ul class="nav nav-tabs statusBar" role="tablist">
<li role="presentation" id="all" class="active">All</li>
<li role="presentation" id="online">Online</li>
<li role="presentation" id="offline">Offline</li>
</ul>
<!-- Tab panes -->
<div ng-controller="allUsersController" class="tab-content result">
<div role="tabpanel" class="tab-pane active" id="allTab">
<div class="well">
<div class="userLogo">
<img ng-src="{{ image }}">
</div>
<h3 class="username">{{ userName }}</h3>
<p><span class="info">{{ channelStatusInfo }}</span></p>
<div class="pull-right">
<span class="statusIcons"><i id="icon" class="fa fa-user green"></i></span>
</div>
</div>
</div>
<div ng-controller="onlineUsersController" role="tabpanel" class="tab-pane" id="onlineTab">
<div class="well"></div>
</div>
<div ng-controller="offlineUsersController" role="tabpanel" class="tab-pane" id="offlineTab">
<div class="well"></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
and javascript
var streamers = ["freecodecamp", "storbeck", "terakilobyte", "habathcx", "RobotCaleb", "thomasballinger", "noobs2ninjas", "beohoff", "brandonlehr", "MedryBW"];
var streamurl = "https://api.twitch.tv/kraken/streams/";
var userurl = "https://api.twitch.tv/kraken/users/";
var online = "green glyphicon glyphicon-user";
var offline = "glyphicon glyphicon-user";
var twitchApp = angular.module("twitchApp", []);
twitchApp.controller("allUsersController",[ '$scope', '$http', allUsersController]);
function allUsersController($scope, $http) {
streamers.forEach(function(streamer){
var userUrl = "https://api.twitch.tv/kraken/users/" + streamer;
var req = {
method : 'GET',
url: userUrl
};
$http(req).then(function(result) {
var streamUrl = "https://api.twitch.tv/kraken/streams/" + streamer;
$http({
method: 'GET',
url: streamUrl
}).then(function(data){
$scope.userName = result.name;
if(result.logo === null) {
$scope.image = "http://fit.ie/fitnew/wp-content/uploads/2014/11/no-profile-image.jpg";
}
// check if streamer is streaming
if(data.stream === null) {
$('#icon').removeClass('green');
} else {
var ii = data.stream;
for(var item in ii) {
$scope.channelStatusInfo = ii.channel.status;
}
}
});
});// the main then callback
});// the forEach loop
}
so can anyone help with why it is not working
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;
});
})();