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>
Related
<div class="col-md-4 col-sm-6 col-xs-12 featured" ng-repeat="item in beds">
<div class="stars" ng-repeat="t in [item.Value.Rate]">
<i class="fa fa-star"></i>
</div>
</div>
This is my code. when i want to use ng-repeat second time, it's not working. i want something like that:
if [item.Value.Rate] return 3, append <i class="fa fa-star"></i> 3 times, if it returns 1, just one <i class="fa fa-star"></i>
Here is a directive definition which I think solves the problem you had in your mind, If you are new to angular I suggest you to first check the directive docs
Edit:
Use lodash to generate range and use that array in ng-repeat.
var app = angular.module('app', []);
app.directive('starRating', function () {
return {
scope: {
value: '='
},
template: '<div class="stars"><i class="fa fa-star" ng-repeat="r in entries"></i></div>',
controller: function ($scope) {
$scope.entries = _.range($scope.value);
}
}
});
app.controller('Ctrl', function($scope) {
var ctrl = this;
ctrl.beds = [
{
Value: {
Rate: 5
}
},
{
Value: {
Rate: 2
}
},
{
Value: {
Rate: 3
}
}
];
return ctrl;
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
</head>
<body>
<div ng-controller="Ctrl as ctrl">
<div class="col-md-4 col-sm-6 col-xs-12 featured" ng-repeat="item in ctrl.beds">
<star-rating value="item.Value.Rate">
</star-rating>
</div>
</div>
</body>
</html>
ng-repeat repeats based on the number of elements. I guess here item.Value.Rate is an integer. So its not a collection and hence the repeat doesn't work.
What you can do:
in the second div use
<div class="stars" ng-repeat="t in getCustomRepeatArray(item.Value.Rate)">
and in your angular code have this:
$scope.getCustomRepeatArray(numberValue)
{
return new Array(numberValue);
}
Don't forget to upvote if you find this helpful!!
You can try this -
In your controller -
$scope.getLength = function(num) {
return new Array(num);
}
And your html -
<div class="col-md-4 col-sm-6 col-xs-12 featured" ng-repeat="item in beds">
<div class="stars" ng-repeat="t in getLength(item.Value.Rate)">
<i class="fa fa-star"></i>
</div>
</div>
https://jsfiddle.net/5u5zakub/7/
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="item in beds">
<div ng-repeat="t in getArray(item)">
<i>{{t}}</i>
</div>
</div>
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.beds = ["1", "2"];
$scope.getArray = function(num) {
if (num == "1")
return ["a","b"];
else
return ["c","d"];
}
});
I just want to use the two way binding to update my list by adding new elements to it. I don't understand why i can't do it? am i missing a major concept?
index.html
<!DOCTYPE html>
<html>
<head>
<title>NgRailsTodoList</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body ng-app="todoApp" ng-controller="MainCtrl">
<div class="container">
<div class="content-container clearfix">
<div class="col-md-12">
<h1 class="content-title text-center">Todo</h1>
<div ng-repeat="list in lists">
<h3>{{list.name}}</h3>
<div ng-repeat="task in list.tasks">
<h5><input type="checkbox" ng-checked="task.completed">{{ task.body }}</h5>
</div>
<div>
</div>
<form ng-submit="addList()">
<input type="text" ng-model="name"></input>
<button type="submit"> New List </button>
</form>
</div>
</div>
</body>
</html>
app.js
angular.module('todoApp', ['ui.router', 'templates'])
.factory('lists',[ function () {
var o = { lists: [{ name: "groceries", completed: false,
tasks: [{body: "buy fish",completed: true},
{body: "buy sushi",completed: false},
{body: "buy bread",completed: true}]}]
};
return o;
}])
.controller('MainCtrl', [
'$scope','lists',
function($scope,lists){
console.log(lists);
$scope.lists = lists.lists;
$scope.addList = function(){
$scope.lists.push({name: $scope.name, completed: false})
// console.log(this.name);
// $scope.name = '';
};
}
]);
The issue is in the markup.
<h5><input type="checkbox" ng-checked="task.completed">{{ task.body }}</h5>
</div>
<div>
</div>
the second <div> should be a close tag </div>
here is a working example http://codepen.io/mkl/pen/KzEmwP
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>
//Define angular app
var app = angular.module('ToDoApp', []);
//controllers
app.controller('taskController', function($scope) {
$scope.today = new Date();
$scope.saved = localStorage.getItem('taskItems');
$scope.taskItem = (localStorage.getItem('taskItems') !== null) ?
JSON.parse($scope.saved) : [{
description: "Why not add a task?",
date: $scope.today,
complete: false
}];
localStorage.setItem('taskItems', JSON.stringify($scope.taskItem));
$scope.newTask = null;
$scope.newTaskDate = null;
$scope.categories = [{
name: 'Personal'
}, {
name: 'Work'
}, {
name: 'School'
}, {
name: 'Cleaning'
}, {
name: 'Other'
}];
$scope.newTaskCategory = $scope.categories;
$scope.addNew = function() {
if ($scope.newTaskDate == null || $scope.newTaskDate == '') {
$scope.taskItem.push({
description: $scope.newTask,
date: "No deadline",
complete: false,
category: $scope.newTaskCategory.name
})
} else {
$scope.taskItem.push({
description: $scope.newTask,
date: $scope.newTaskDate,
complete: false,
category: $scope.newTaskCategory.name
})
};
$scope.newTask = '';
$scope.newTaskDate = '';
$scope.newTaskCategory = $scope.categories;
localStorage.setItem('taskItems', JSON.stringify($scope.taskItem));
};
$scope.deleteTask = function() {
var completedTask = $scope.taskItem;
$scope.taskItem = [];
angular.forEach(completedTask, function(taskItem) {
if (!taskItem.complete) {
$scope.taskItem.push(taskItem);
}
});
localStorage.setItem('taskItems', JSON.stringify($scope.taskItem));
};
$scope.save = function() {
localStorage.setItem('taskItems', JSON.stringify($scope.taskItem));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ToDoApp">
<div class="container">
<div class="content" ng-controller="taskController">
<h1>Welcome to your to do List</h1>
<p class="tagline">By Flintdesignz
</p>
<form>
<div class="row">
<div class="inputContainer">
<input type="text" id="description" class="taskName" placeholder="I need to..." ng-model="newTask">
</div>
</div>
<div class="row">
<div class="inputContainer"> <i class="fa fa-caret-down selectArrow"></i>
<select id="category" class="taskCategory" ng-model="newTaskCategory" ng-options="obj.name for obj in categories">
<option class="disabled" value="">Category</option>
</select>
</div>
</div>
<div class="row">
<div class="inputContainer">
<input type="date" id="dueDate" class="taskDate" ng-model="newTaskDate">
</div>
</div>
<div class="row buttons_holder">
<button class="taskAdd" ng-click="addNew()"><i class="fa fa-plus icon"></i>Add task</button>
<button class="taskDelete" ng-click="deleteTask()"><i class="fa fa-trash-o icon"></i>Remove Tasks</button>
</div>
</form>
<!-- TaskList Starts Here -->
<ul class="taskList">
<li class="taskItem" ng-repeat="taskItem in taskItem track by $index" ng-model="taskItem">
<input type="checkbox" class="taskCheckbox" ng-model="taskItem.complete" ng-change="save()">
<span class="complete-{{taskItem.complete}}">{{taskItem.description}}</span> <span class="category-{{taskItem.category}}">{{taskItem.category}}</span> <strong class="taskDate complete-{{taskItem.complete}}"><i class="fa fa-calendar"></i>{{taskItem.date | date : 'mediumDate'}}</strong>
</li>
</ul>
<!-- TaskList Ends HEre -->
</div>
<!-- Content Ends Here -->
</div>
<!-- container -->
</div>
Building a Todo App that adds tasks and deletes them aswell and getting the above error. Below is my html and my angular code. I have checked other blogs and still no valid answer.
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.