Refreshing data after a JSON call in Angular - angularjs

I have an angular model which gets the data through a JSON call and shows as follows. After making a second JSON how can I refresh this list.
<ul ng-repeat="x in names">
<h3> {{ x.name }} </h3>
<h4> {{ x.place }} </h4>
<p> <img ng-src="{{x.image}}"> </p>
</ul>
I inject the data initially through this:
$http.get("").success(function (response) {$scope.names = courseParsed;});
You can check it out below.
http://findcourse.parseapp.com/
I am adding the full code to make it easier, through the "Select and Search" Button ($scope.names[0].name = "test"; $scope.names.splice(1, 1)), I am trying to modify the list, even though it worked once, now it is not working at all.
var app = angular.module('myApp', []);
var queryParam ={};
app.controller('customersCtrl', function($scope, $http, $q) {
Parse.$ = jQuery;
Parse.initialize("mvLeLP1wbRJW24ESjaUEgPueWHpMLNZNvwLnTTJW", //"applicationId":
"NqwHrO9MjC9uLgqu4zNIi6u9TC19GVRbMmNxXTag"); //JavaScript Key
var Article = Parse.Object.extend('coursesParse');
$scope.master = {};
$scope.update = function(user) {
//$scope.master = angular.copy(user);
//alert(user.degree+" "+user.industry);
//alert($scope.names[0].name);
$scope.names[0].name = "test";
$scope.names.splice(1, 1);
};
var myLat = -37.875773;
var myLng = 145.087829;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(getPosition);
} else {
alert("Please allow using your location to see the courses around you!");
}
function getPosition(position) {
myLat = position.coords.latitude;
myLng = position.coords.longitude;
var mapOptions = {
center: new google.maps.LatLng(myLat, myLng),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
var ArticleDfd = $q.defer();
var queryInitial = new Parse.Query(Article);
//queryInitial.equalTo('name', 'Electrical Supply');
var geoPoint = ({latitude: myLat, longitude: myLng});
queryInitial.near("coords", geoPoint);
queryInitial.limit(4);
queryInitial.find().then(function (data) {
var courseParsed = [];
for (var i = 0; i < data.length; i++) {
courseParsed[i] = {
"name": data[i].get('name'),
"description": data[i].get('description'),
"length": data[i].get('length'),
"place": data[i].get('place'),
"comment": data[i].get('comments'),
"image": data[i].get('images'),
"webLink": data[i].get('weblink'),
"xCor": data[i].get('coords').latitude,
"yCor": data[i].get('coords').longitude
};
//for (var prop in courseParsed[i]) {alert(prop + " = "+ courseParsed[i][prop])};
}
for(var i=0;i<courseParsed.length;i++){
//alert(courseParsed[i]['xCor'], courseParsed[i]['yCor']);
//alert(courseParsed[i]['xCor']);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(courseParsed[i]['xCor'], courseParsed[i]['yCor']),
//icon: "img/icon.png",
map: map,
title: 'Hello World!'
});
}
ArticleDfd.resolve(data);
$http.get("").success(function (response) {$scope.names = courseParsed;});
}, function (error) {
ArticleDfd.reject(data);
});
ArticleDfd.promise
.then(function (article) {
$scope.currentArticle = article;
})
.catch(function (error) {
//do something with the error
});
});
HTML page:
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://www.parsecdn.com/js/parse-1.2.13.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="js/controllers.js"></script>
<script src="js/effect.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="css/app.css">
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<div id="map">Loading...</div>
<div id="searchForm" ng-controller="customersCtrl">
<form novalidate>
<select type="text" ng-model="user.degree">
<option>Diploma</option><option>Advanced Diploma</option><option>Certificate III</option>
</select>
<select type="text" ng-model="user.industry">
<option>Finance</option><option>Construction</option><option>Energy and Power</option>
</select>
<!-- Gender: <input type="radio" ng-model="user.gender" value="male" />male
<input type="radio" ng-model="user.gender" value="female" />female<br />
<input type="button" ng-click="reset()" value="Reset" />
<pre>user = {{user | json}}</pre>
<pre>master = {{master | json}}</pre>-->
<input type="submit" ng-click="update(user)" value="Select and Search" />
</form>
</div>
<ul ng-repeat="x in names">
<h3> {{ x.name }} </h3>
<h4> {{ x.place }} </h4>
<p> <img ng-src="{{x.image}}"> </p>
</ul>
<!--<p> {{ x.length + ', ' + x.description }}
<p> {{ x.comment }} </p> </p> -->
</div>
</body>
</html>


All you have to do is to move your ul inside the div above.
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://www.parsecdn.com/js/parse-1.2.13.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="js/controllers.js"></script>
<script src="js/effect.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="css/app.css">
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<div id="map">Loading...</div>
<div id="searchForm" ng-controller="customersCtrl">
<form novalidate>
<select type="text" ng-model="user.degree">
<option>Diploma</option><option>Advanced Diploma</option><option>Certificate III</option>
</select>
<select type="text" ng-model="user.industry">
<option>Finance</option><option>Construction</option><option>Energy and Power</option>
</select>
<!-- Gender: <input type="radio" ng-model="user.gender" value="male" />male
<input type="radio" ng-model="user.gender" value="female" />female<br />
<input type="button" ng-click="reset()" value="Reset" />
<pre>user = {{user | json}}</pre>
<pre>master = {{master | json}}</pre>-->
<input type="submit" ng-click="update(user)" value="Select and Search" />
</form>
<ul ng-repeat="x in names">
<h3> {{ x.name }} </h3>
<h4> {{ x.place }} </h4>
<p> <img ng-src="{{x.image}}"> </p>
</ul>
</div>
</div>
</body>
</html>


after calling second JSON. assign result to 'names' variable. then use following code
$route.reload();


I think you need to place your $http call in $scope.getData function & call it again whenever you wanted to reload data. ng-repeat will do the magic for you of refreshing data as any change occurred in names object. Basically any change in names will render those many ul's on view.

Related

Upload an Image to a Web Api using AngularJS

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;
});
};
});

What did I do wrong with my todo app?

My todo app just doesn't work. It doesn't even display any pre-existing todo tasks on screen. Nor is it able to add or remove any items.
All it renders is the input form and submit button.
Why is that? Please advise!
var app = angular.module('todoApp',[])
app.controller('TodoController',['$scope', function($scope){
$scope.todos = [
{task: 'Learn AngularJs', done: false},
{task:'Feed the dog', done: false},
{task: 'Water the cactus', done: true}]
$scope.addTodo = function(){
$scope.todos.push({task: $scope.todoText, done: false});
$scope.todoText ='';
console.log($scope.todos);
}
$scope.removeTodo = function(){
var oldTodos = $scope.todos;
$scope.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) $scope.todos.push(todo);
});
}
}])
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<meta charset="utf-8"/>
<script src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="todo.js"></script>
<style>
.done-true{
text-decoration: line-through;
color: grey;
}
</style>
</head>
<body >
<div ng-controller="TodoController as todoList">
<ul class="unstyled">
<li ng-repeat="todo in todoList.todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.task}}</span>
</li>
</ul>
<form ng-submit="todoList.addTodo()">
<input type="text" placeholder="Add a new todo" ng-model="todoList.todoText">
<input type="button" type="submit" value="add">
</form>
<button ng-click="todoList.removeTodo()">Delete All</button>
</div>
</body>
</html>

remove todoList. while accessing variables and methods..
So your code should look like
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<meta charset="utf-8"/>
<script src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="todo.js"></script>
<style>
.done-true{
text-decoration: line-through;
color: grey;
}
</style>
</head>
<body >
<div ng-controller="TodoController">
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.task}}</span>
</li>
</ul>
<form>
<input type="text" placeholder="Add a new todo" ng-model="todoText">
<input type="button" ng-click="addTodo()" type="submit" value="add">
</form>
<button ng-click="todoList.removeTodo()">Delete All</button>
</div>
</body>
</html>

You are using MVVM method in your context so if you use controllerAs you need to use VM varibale is a scope in the controller instead of $scope variable. If you have any issues about MVC and MVVM please go through the reference link
http://www.dotnettricks.com/learn/designpatterns/understanding-mvc-mvp-and-mvvm-design-patterns
http://www.meritsolutions.com/mobile-development/mvvm-architectural-pattern-angularjs/
var app = angular.module('todoApp',[])
app.controller('TodoController',['$scope', function($scope){
var vm = this;
vm.todos = [
{task: 'Learn AngularJs', done: false},
{task:'Feed the dog', done: false},
{task: 'Water the cactus', done: true}]
vm.addTodo = function(){
if(vm.todoText)
vm.todos.push({task: vm.todoText, done: false});
vm.todoText ='';
console.log(vm.todos);
}
vm.removeTodo = function(){
var oldTodos = vm.todos;
vm.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) vm.todos.push(todo);
});
}
}])
.done-true{
text-decoration: line-through;
color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="todoApp" ng-controller="TodoController as todoList">
<ul class="unstyled">
<li ng-repeat="todo in todoList.todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.task}}</span>
</li>
</ul>
<form >
<input type="text" placeholder="Add a new todo" ng-model="todoList.todoText">
<input type="button" type="button" value="add" ng-click="todoList.addTodo()">
</form>
<button ng-click="todoList.removeTodo()">Delete All</button>
</div>

How to get the checked item inside a ng-repeat using angular?

I want to get the check item from a list withing a ng-repeat in angular. Once the item is checked I want to put that checked item to another list.Here is my code so far.
<div class="col-lg-12" data-ng-repeat="user in users track by $index">
<div class="col-lg-12">
<div class="col-lg-3"> {{user.name}} </div>
<div class="col-lg-3">
<input type="checkbox" data-ng-checked="selectUser(user)" data-ng-model="user.isSelected" />
</div>
</div>
</div>
<div class="col-lg-12" data-ng-repeat="selectedUser in selectedUsers track by $index">
<div class="col-lg-12">
<div class="col-lg-3"> {{selectedUser.name}} </div>
<div class="col-lg-3">
</div>
</div>
</div>
This is my controller function to get the checked users.
$scope.selectUser = function(user){
if (user.isSelected) {
if ($scope.selectedUsers.indexOf(user.id) === -1) {
$scope.selectedUsers.push(user);
}
}else {
var index = $scope.selectedUsers.indexOf(user.id);
if ($scope.selectedUsers.indexOf(user.id) != -1) {
$scope.selectedUsers.splice(index, 1);
}
}
When I check a checkbox, all the users value will be passed to selectUsers() function. And it will give incorrect result. I want only to get the selected users. How can I do this?

Some mistakes you made here
You are using ng-check in wrong way.
Try this
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.allUsers = [{
id:0,
name:'john',
age:26,
selectedUser:true
},{
id:1,
name:'isha',
age:23,
selectedUser:false
},{
id:2,
name:'scott',
age:34,
selectedUser:true
},{
id:3,
name:'riya',
age:26,
selectedUser:false
},{
id:4,
name:'Adam',
age:5,
selectedUser:true
},{
id:5,
name:'doe',
age:56,
selectedUser:true
},{
id:6,
name:'Jack',
age:22,
selectedUser:true
},{
id:7,
name:'robin',
age:11,
selectedUser:true
}];
$scope.selectedUsers = [];
$scope.selectUser = function(user){
if (user.isSelected) {
$scope.selectedUsers.push(user);
}else {
for (var i = 0; i < $scope.selectedUsers.length; i++) {
if ($scope.selectedUsers[i].id == user.id) {
$scope.selectedUsers.splice(i, 1);
}
}
}
}
})
</script>
</head>
<body style="margin-top: 100px" ng-app="myApp" ng-controller="myCtrl">
<div class="col-lg-12" data-ng-repeat="user in allUsers track by $index">
<div class="col-lg-12">
<div class="col-lg-3"> {{user.name}} </div>
<div class="col-lg-3">
<input type="checkbox" ng-change="selectUser(user)" data-ng-model="user.isSelected" />
</div>
</div>
</div>
selected users
<div class="col-lg-12" data-ng-repeat="user in selectedUsers track by $index">
<div class="col-lg-12">
<div class="col-lg-3"> {{user.name}} </div>
<div class="col-lg-3">
</div>
</div>
</div>
</body>
</html>

Try this I think u need like this
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $window) {
$scope.Fruits = [{
FruitId: 1,
Name: 'Apple',
Selected: false
}, {
FruitId: 2,
Name: 'Mango',
Selected: false
}, {
FruitId: 3,
Name: 'Orange',
Selected: false
}];
$scope.GetValue = function () {
var message = "";
for (var i = 0; i < $scope.Fruits.length; i++) {
if ($scope.Fruits[i].Selected) {
var fruitId = $scope.Fruits[i].FruitId;
var fruitName = $scope.Fruits[i].Name;
message += "Value: " + fruitId + " Text: " + fruitName + "\n";
}
}
$window.alert(message);
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<div ng-repeat="fruit in Fruits">
<label for="chkCustomer_{{fruit.FruitId}}">
<input id="chkCustomer_{{fruit.FruitId}}" type="checkbox" ng-model="fruit.Selected" />
{{fruit.Name}}
</label>
</div>
<br />
<br />
<input type="button" value="Get" ng-click="GetValue()" />
</div>
</body>
</html>

Trying to filter multiple keywords in same objects, using angular and checkboxes

This is my first question so please bear with my newbness.
I am trying to filter an array of objects by keywords using checkbox inputs.
I want only the objects that contain all the keywords selected to show.
When each object only had 1 keyword it worked perfect, but now that each object has multiple keywords, I have been struggling to get it to work.
I have been trying to use this as a reference: http://jsfiddle.net/65Pyj/
I have tried many variations but this is the closest I get.
This current version is my latest attempt to use a for loop to cycle through the array, but now it doesn't really filter at all, but just toggles everything at once..
var app = angular.module("Grou", []);
app.controller('GrouCntrl', function($scope) {
$scope.title = 'download this awesome stuff!';
$scope.promo = 'this is the description text';
$scope.products =
[{
name: 'Bill',
keywords: ['standing', 'man', 'america'],
image: 'img/thumbnails/Bill.png'
},
{
name: 'Francois ',
keywords: ['man', 'sitting', 'europe'],
image: 'img/thumbnails/Bill.png'
},
{
name: 'jack ',
keywords: ['sitting'],
image: 'img/thumbnails/Bill.png'
},
{
name: 'jack ',
keywords: ['walking', 'woman'],
image: 'img/thumbnails/Bill.png'
},
{
name: 'jack ',
keywords: ['lying down', 'europe'],
image: 'img/thumbnails/Bill.png'
},
{
name: 'jack ',
keywords: ['sitting', 'america'],
image: 'img/thumbnails/Bill.png'
},
];
$scope.keywordsIncludes = [];
$scope.includesKeywords = function(keywords) {
var i = $.inArray(keywords, $scope.keywordsIncludes);
if (i > -1) {
$scope.keywordsIncludes.splice(i, 1);
} else {
$scope.keywordsIncludes.push(keywords);
}
}
$scope.keywordsFilter = function(products) {
if ($scope.keywordsIncludes.length > 0) {
var arrayLength = $.inArray(products.keywords).length;
for (i = 0; i < arrayLength; i++) {
if ($.inArray(products.keywords[i], $scope.keywordsIncludes) < 0)
return;
}
return products;
}
}
$scope.query = "";
$scope.search = function(product) {
if ($scope.query.length <= 0) return true;
var query =
("" + $scope.query).toLowerCase(),
fullName = [product.keywords].join(" ").toLowerCase();
return fullName.indexOf(query) > -1;
}
});
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Raleway:400,900,600,700|Dekko' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body ng-app="Grou">
<div class="header">
<div class="logo-box">
<div class="leftcontainer">
</div>
</div>
<div class="nav-bar">
<div class="container">
<button>a propos</button>
<button>accueil</button>
<button>pack</button>
<button>donation</button>
</div>
</div>
<div class="right-box">
<div class="container">
</div>
</div>
</div>
<div class="spacer">
</div>
<div class="bottomContainer">
<div ng-controller="GrouCntrl">
<div class="left-bar">
<div class="leftcontainer">
<br>
<br>
<input id="search-input" name="search" type="text" placeholder="chercher" ng-model="query">
<br>
<h4>Position</H4>
<input type="checkbox" ng-click="includesKeywords('standing')" />standing
</br/>
<input type="checkbox" ng-click="includesKeywords('sitting')" />sitting
</br/>
<input type="checkbox" ng-click="includesKeywords('walking')" />walking
</br/>
<input type="checkbox" ng-click="includesKeywords('lying down')" />lying down
</br/>
<br>
<h4>Another sub-header</h4>
<input type="checkbox" ng-click="includesKeywords('man')" />man
</br/>
<input type="checkbox" ng-click="includesKeywords('woman')" />woman
</br/>
<br>
<h4>Another sub-header</h4>
<input type="checkbox" ng-click="includesKeywords('america')" />america
</br/>
<input type="checkbox" ng-click="includesKeywords('europe')" />europe
</br/>
</div>
</div>
<div class="right-bar">
<div class="main">
<div class="container">
<h1> {{ title }} </h1>
<h2> {{ promo }} </h2>
</div>
<div class="productBox">
<div>
<div class="container">
</div>
<div>
<div ng-repeat="product in products | filter:keywordsFilter| filter:search" class="thumbnail-container">
<div>
<img ng-src="{{product.image}}" class="thumbnails">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Controllers -->
<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/MainController.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Thanks in advance and feedback in my post appreciated.

OK i figured it out!
I was trying to pass the whole array and not the string.
I relooked at this reference to rework my filter: http://jsfiddle.net/6mqbm/
var app = angular.module("Grou",[]);
app.controller('GrouCntrl',function($scope){
$scope.title = 'download this awesome stuff!';
$scope.promo = 'this is the description text';
$scope.products =
[
{
name: 'Bill',
keywords: ['standing', 'man', 'america'],
image: 'img/thumbnails/Bill.png'
},
{
name: 'Francois ',
keywords: ['man', 'sitting', 'europe'],
image: 'img/thumbnails/Bill.png'
},
{
name: 'jack ',
keywords: ['sitting'],
image: 'img/thumbnails/Bill.png'
},
{
name: 'jack ',
keywords: ['walking', 'woman'],
image: 'img/thumbnails/Bill.png'
},
{
name: 'jack ',
keywords: ['lying down','europe'],
image: 'img/thumbnails/Bill.png'
},
{
name: 'jack ',
keywords: ['sitting', 'america'],
image: 'img/thumbnails/Bill.png'
},
];
$scope.keywordsIncludes = [];
$scope.includesKeywords = function(keywords) {
var i = $.inArray(keywords, $scope.keywordsIncludes);
if (i > -1) {
$scope.keywordsIncludes.splice(i, 1);
}
else {
$scope.keywordsIncludes.push(keywords);
}
}
$scope.keywordsFilter = function(products) {
if ($scope.keywordsIncludes.length > 0) {
var arrayLength = $.inArray(products.keywords).length;
for (var i in products.keywords) {
if ($scope.keywordsIncludes.indexOf(products.keywords[i]) != -1) {
return true;
}
}
return false;
}
}
$scope.query = "";
$scope.search = function(product) {
if ($scope.query.length <= 0) return true;
var query =
(""+$scope.query).toLowerCase(),
fullName = [product.keywords].join(" ").toLowerCase();
return fullName.indexOf(query) > -1;
}
});
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Raleway:400,900,600,700|Dekko' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body ng-app="Grou">
<div class="header">
<div class="logo-box">
<div class="leftcontainer">
</div>
</div>
<div class="nav-bar">
<div class="container">
<button>a propos</button>
<button>accueil</button>
<button>pack</button>
<button>donation</button>
</div>
</div>
<div class="right-box">
<div class="container">
</div>
</div>
</div>
<div class="spacer">
</div>
<div class="bottomContainer">
<div ng-controller="GrouCntrl">
<div class="left-bar">
<div class="leftcontainer">
<br>
<br>
<input id="search-input" name="search" type="text" placeholder="chercher" ng-model="query">
<br>
<h4>Position</H4>
<input type="checkbox" ng-click="includesKeywords('standing')"/> standing</br/>
<input type="checkbox" ng-click="includesKeywords('sitting')"/> sitting</br/>
<input type="checkbox" ng-click="includesKeywords('walking')"/> walking</br/>
<input type="checkbox" ng-click="includesKeywords('lying down')"/> lying down</br/>
<br>
<h4>Another sub-header</h4>
<input type="checkbox" ng-click="includesKeywords('man')"/> man</br/>
<input type="checkbox" ng-click="includesKeywords('woman')"/> woman</br/>
<br>
<h4>Another sub-header</h4>
<input type="checkbox" ng-click="includesKeywords('america')"/> america</br/>
<input type="checkbox" ng-click="includesKeywords('europe')"/> europe</br/>
</div>
</div>
<div class="right-bar">
<div class="main" >
<div class="container">
<h1> {{ title }} </h1>
<h2> {{ promo }} </h2>
</div>
<div class="productBox">
<div>
<div class="container">
</div>
<div>
<div ng-repeat="product in products | filter:keywordsFilter| filter:search" class="thumbnail-container" >
<div>
<img ng-src="{{product.image}}" class="thumbnails">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Controllers -->
<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/MainController.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>

Display Images in AngularJS Modal inside ng-repeat

here is the index.html
<!DOCTYPE html>
<html ng-app="myApp" ng-app lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
ul>li, a{cursor: pointer;}
</style>
<title>get some data from the database</title>
</head>
<body ng-controller="delayController">
<div ng-controller="customersCrtl">
<div class="container">
<br/>
<blockquote><h4 dir="rtl" align="center">test</h4></blockquote>
<br/>
<div dir="rtl" class="row">
<div class="col-md-2">num of items per page:
<select ng-model="entryLimit" class="form-control">
<option>5</option>
<option>10</option>
<option>20</option>
<option>50</option>
<option>100</option>
</select>
</div>
<div class="col-md-3">search:
<input type="text" ng-model="search" ng-change="filter()" placeholder="enter what you are looking for" class="form-control" />
</div>
<div dir="rtl" class="col-md-4">
<h5>showing {{ filtered.length }} out of {{ totalItems}} items</h5>
</div>
</div>
<br/>
<div dir="rtl" align="center" class="alert alert-info" ng-show="loading"><img ng-src="images/131.gif"/><h2>loading details...</h2>
<div ng-controller="customersCrtl" class="container">
<progressbar class="progress-striped active" type="info" animate="true" max="100" value="progressBar.progress"><b>{{progressBar.progress}}%</b></progressbar>
</div>
</div>
<div class="row" dir="rtl">
<div dir="rtl" class="col-md-12" ng-show="filteredItems > 0">
<table align="right" dir="rtl" class="table table-striped table-bordered">
<thead>
<th>item name <a ng-click="sort_by('name');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>item price <a ng-click="sort_by('price');"><i class="glyphicon glyphicon-sort"></i></a></th>
</thead>
<tbody>
<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
<td>{{data.name}}</td>
<td>{{data.price}}
<img src="images/binoculars.png" height="12" width="12"></td>
</tr>
</tbody>
</table>
</div>
<div dir="rtl" class="col-md-12" ng-show="filteredItems == 0">
<div class="col-md-12">
<h4>לא נמצאו מוצרים.</h4>
</div>
</div>
<div class="col-md-12" ng-show="filteredItems > 0">
<div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="דף קודם" next-text="דף הבא"></div>
</div>
</div>
</div>
</div>
<script src="js/angular.min.js"></script>
<script src="js/angular-bootstrap-lightbox.js"></script>
<script src="js/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="js/angular-count-to.js"></script>
<script src="app/app.js"></script>
</body>
</html>
This is the app.js
var app = angular.module('myApp', ['ui.bootstrap','countTo']);
app.filter('startFrom', function() {
return function(input, start) {
if(input) {
start = +start; //parse to int
return input.slice(start);
}
return [];
}
});
app.config(['$compileProvider', function($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|http?|file|data):/);
}]);
app.controller('customersCrtl', function ($scope, $http, $timeout) {
$scope.$emit('LOAD');
$scope.progressBar = { progress : 0 };
$http.get('ajax/getCustomers.php').success(function(data){
$scope.list = data;
$scope.currentPage = 1; //current page
$scope.entryLimit = 50; //max no of items to display in a page
$scope.filteredItems = $scope.list.length; //Initially for no filter
$scope.totalItems = $scope.list.length;
$scope.$emit('UNLOAD');
});
(function progress(){
if($scope.progressBar.progress < 100){
$timeout(function(){
$scope.progressBar.progress += 1;
progress();
},100);
}
})();
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
};
$scope.filter = function() {
$timeout(function() {
$scope.filteredItems = $scope.filtered.length;
}, 10);
};
$scope.sort_by = function(predicate) {
$scope.predicate = predicate;
$scope.reverse = !$scope.reverse;
};
});
app.controller('delayController',['$scope',function($scope){
$scope.$on('LOAD',function(){$scope.loading=true});
$scope.$on('UNLOAD',function(){$scope.loading=false});
}]);
As you can see, at the moment, the image is opened in a new tab/window and it looks a bit off. This is the reason for wanting it to be opened in a modal like window.

You can pass any controller to the bootstrap modal service as so.
Just create your controller and place your image data on its scope.
Then, pass it to the open call of the modal service.
http://plnkr.co/edit/8TfCPs?p=preview
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log,$sce) {
var parentScope = $scope;
$scope.imgs =[];
$scope.imgs.push($sce.trustAsUrl("http://dummyimage.com/64X64/000/f00"));
$scope.imgs.push($sce.trustAsUrl("http://dummyimage.com/64X64/000/0f0"));
$scope.imgs.push($sce.trustAsUrl("http://dummyimage.com/64X64/000/00f"));
$scope.open = function () {
$modal.open({
templateUrl: 'myModalContent.html',
backdrop: true,
windowClass: 'modal',
controller: function ($scope, $modalInstance) {
$scope.imgs = parentScope.imgs;
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
});
};
};
Now, as an addendum based on your comments, if you are using image data encoded in base64 you will need to build up the url using $sce.trustAsResourceUrl
https://docs.angularjs.org/api/ng/service/$sce
http://plnkr.co/edit/jRXHL3zSR8rDT1sJJ1tw?p=preview
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.3.16" data-semver="1.3.16" src="https://code.angularjs.org/1.3.16/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
<img ng-src="{{imgUri}}"/>
<script>
var app = angular.module("app",[]);
app.controller("testCtrl",function($scope,$sce){
var data="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";
$scope.imgUri = $sce.trustAsResourceUrl("data:image/png;base64," + data);
});
angular.bootstrap(document,[app.name]);
</script>
</body>
</html>

You can use ng-src Use:
<img ng-src="data.imagedata" alt="Description"/>

Resources