when i use ng-repeat to show data json from php it work but when the data i use for button it can't grap some data. my data grap latitude and longitude from http my controller.js
.controller('HomeCtrl', function ($scope, kaka, $ionicPopup, $http){
$scope.item ={};
$scope.code = {};
$scope.sizes = [ {code: 123456789, name: 'Modul 1'}, {code: 864369038796946, name: 'Modul 4'},
{code: 864369038803833, name: 'Modul 5'}, {code: 864369038816645, name: 'Modul 6'},
{code: 864369038797142, name: 'Modul 7'}, {code: 864369038796698, name: 'Modul 8'}];
$scope.update = function(selected) {
$scope.item = selected;
};
$scope.rlockbtn = function () {
kaka.rlock($scope.item.code).success(function (data) {
var alertPopup = $ionicPopup.alert({
title: $scope.item.code,
template: 'Lock'
});
}).error(function (data) {
});
};
$http.get("http://192.168.100.13:88/OMG1/web.php?tN=find")
.then(function(response) {
$scope.myWelcome = response.data;
});
$scope.find = function () {
var mylatlng = {lat: $scope.myWelcome.latitude, lng: $scope.myWelcome.longitude};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: {lat: -7.3342266, lng: 112.7650341},
//center: {lat: data[0].lat, lng: data[0].lng},
mapTypeId: 'terrain'
});
var marker = new google.maps.Marker({
position: mylatlng,
map: map,
title: 'Your Motor'
});
};
)}
this is my html code
<script src="angular.min.js"></script>
<ion-view view-title="Home">
<ion-content style="background-color:#818181; background-size: cover;">
<ion-item class="row item-text-wrap " >
<div class="col" style="height: 300px;padding: 0px" id="map" data-tap-disabled="true"></div>
</ion-item><br>
<form name="form">
<div class="button-bar">
<div>
<select ng-options="size as size.code for size in sizes " ng-model="item" style="background-color:#4d94ff;color: white"ng-change="update(item)"></select>
</div>
</div>
<div>
<ul>
{{myWelcome}}
<li ng-repeat="x in myWelcome" >
{{ x.latitude}}
{{ x.longitude}}
</li>
</ul>
<button class="btn btn-success btn-lg" style="background-color:#4d94ff;color: white" ng-click="rlockbtn()" >Lock</button>
<button class="btn btn-success btn-lg" style="background-color:#4d94ff;color: white" ng-click="unlock()" >Unlock</button>
<button class="btn btn-success btn-lg" style="background-color:#4d94ff;color: white" ng-click="engine()" >Engine Off</button>
</div>
</form>
<div class="button-bar">
<button class="icon ion-ios-location btn btn-success btn-lg" style="background-color:#4d94ff;color: white" ng-click="find()" > Find</button>
<button class="icon ion-map btn btn-success btn-lg" style="background-color:#4d94ff;color: white" ng-click="tracking()" > Tracking</button>
</div>
</ion-content>
</ion-view>
please help me solve my problem
I am not sure but it looks like your myWelcome.latitude and longitude are arrays, so it should be:
<ul>
{{myWelcome}}
<li ng-repeat="x in myWelcome.latitude" >
{{ x}}
</li>
<li ng-repeat="x in myWelcome.longitude" >
{{ x}}
</li>
</ul>
Related
Trying to learn Angular/Rails basics, and I am on this page of this AngularJS web-app tutorial: https://thinkster.io/tutorials/angular-rails/creating-the-single-post-view
I'm encountering a problem I have spent countless hours pouring over, but since my JavaScript knowledge is limited and my Angular experience is none, I'm coming to the conclusion that I will never figure out what I've done wrong.
My main view/controller works fine, but when I click the Comments on a post, it can never pull the data correctly. You can see a demo of it not working here: http://joshmccord.com/demo/webapp/#/home - just click Comments and see it broken.
Here's the code for app.js:
angular.module('flapperNews', ['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
// Make sure only last state has ending semicolon
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
})
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('home');
}
])
.factory('posts', [function() {
// Service Body
var o = {
posts: []
};
return o;
// End Service Body
}])
// Make sure only last controller has ending semicolon
.controller('MainCtrl', [
'$scope',
'posts',
function($scope, posts){
// Bind $scope.posts to factory/services posts
$scope.posts = posts.posts;
$scope.posts = [
{title: 'Post 1', upvotes: 5},
{title: 'Post 2', upvotes: 2},
{title: 'Post 3', upvotes: 15},
{title: 'Post 4', upvotes: 9},
{title: 'Post 5', upvotes: 4}
];
$scope.addPost = function(){
if(!$scope.title || $scope.title === '') { return; }
$scope.posts.push({
title: $scope.title,
link: $scope.link,
upvotes: 0,
comments: [
{author: 'Joe', body: 'Cool post!', upvotes: 0},
{author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
]
});
$scope.title = '';
$scope.link = '';
};
$scope.incrementUpvotes = function(post) {
post.upvotes += 1;
};
}])
.controller('PostsCtrl', [
'$scope',
'$stateParams',
'posts',
function($scope, $stateParams, posts){
$scope.post = posts.posts[$stateParams.id];
$scope.addComment = function(){
if($scope.body === '') { return; }
$scope.post.comments.push({
body: $scope.body,
author: 'user',
upvotes: 0
});
$scope.body = '';
};
}]);
And finally here is the index.html:
<html>
<head>
<title>My Angular App!</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css">
<link rel="stylesheet" href="app.css">
<script src="https://use.fontawesome.com/e1c22672d7.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script> <!-- http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js -->
<script src="app.js"></script>
</head>
<body ng-app="flapperNews">
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Flapper News</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>Home</li>
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
<div class="row mainView">
<div class="medium-6 medium-offset-3 columns">
<ui-view/>
</div>
</div>
<script type="text/ng-template" id="/home.html">
<div ng-repeat="post in posts | orderBy: '-upvotes'" class="postList">
<span class="fa fa-thumbs-up" ng-click="incrementUpvotes(post)"></span>
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
<span>
Comments
</span>
- Upvotes: {{post.upvotes}}
</div>
<form ng-submit="addPost()" class="addPost">
<h4>Add A Post</h4>
<input type="text" placeholder="Title" ng-model="title">
<input type="text" placeholder="Link" ng-model="link">
<button type="submit" class="button expanded">Post</button>
</form>
</script>
<script type="text/ng-template" id="/posts.html">
<h3>
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</h3>
<div ng-repeat="comment in posts.comments | orderBy:'-upvotes'">
<span class="fa fa-thumbs-up" ng-click="incrementalUpvotes(comment)"></span>
{{comment.upvotes}} - by {{coment.author}}
<span style="font-size: 20px; margin-left: 10px;">
{{comment.body}}
</span>
</div>
<form ng-submit="addComment()" class="addComment">
<h4>Add A Comment</h4>
<input type="text" placeholder="Comment" ng-model="body">
<button type="submit" class="button expanded">Post</button>
</form>
</script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
</body>
</html>
I am trying to make a button clickable with a different URL depending on which outcomes are selected. At the moment my code shown below sends all links to http://example.com. I would like to make this change depending on which selections have been chosen by the user.
HTML
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-xs-12 text-right">
<button class="btn btn-default btn-corner" type="submit" data-bind="click: startOver, visible: queryData().id > 0">Start over</button>
</div>
</div>
</div>
<div class="container main">
<div class="row">
<div class="c12 text-center">
<h1 data-bind="text: queryData().text"></h1>
<h3 data-bind="text: queryData().subhead"></h3>
<h3><a data-bind="text: queryData().link, attr: {href: url}"></a></h3>
<div class="option-group" data-bind="foreach: queryData().answers">
<button class="btn btn-default btn-lg" type="submit" data-bind="click: $parent.goToTarget, text: text"></button>
</div>
<button class="btn btn-default" type="submit" data-bind="click: stepBack, visible: navHistory().length > 1">Previous Step</button>
<button class="btn btn-default" type="submit" data-bind="click: buyBook, visible: navHistory().length > 1">Buy the book</button>
</div>
</div>
</div>
<div class="push"></div>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
<script src="app.js?v=0.4.0"></script>
<script>
</script>
</body>
</html>
The Javascript is below:
var queries = [{
id: 0,
text: "Start?",
answers: [{
text: "Let's Start!",
target: 1
}]
}, {
id: 1,
text: "Which sectiondo you want",
answers: [{
text: "Foo",
target: 2
}, {
text: "Bar",
target: 3
}, {
text: "Foobar",
target: 4
}]
}, {
id: 2,
text: "Selection1",
link: "test2.com",
answers: []
}];
function QueryViewModel() {
var self = this;
self.url = ko.observable("https://example.com");
self.querySet = ko.observable();
self.currentStep = ko.observable();
self.queryData = ko.observable();
self.sfw = ko.observable();
self.navHistory = ko.observableArray();
// Operations
self.goToTarget = function(obj) {
self.navHistory.push(self.currentStep());
self.currentStep(obj.target);
self.queryData(self.querySet()[obj.target]);
}
self.startOver = function() {
self.navHistory.removeAll();
self.goToTarget({target: 0});
}
self.stepBack = function() {
var lastStep = self.navHistory().length > 1 ? self.navHistory.pop() : 0;
self.currentStep(lastStep);
self.queryData(self.querySet()[lastStep]);
}
this.buyBook = function() {
window.open("https://www.google.com", "_blank");
}
var paramsString = document.location.hash.substring(1);
var params = new Array();
if (paramsString) {
var paramValues = paramsString.split("&");
for (var i = 0; i < paramValues.length; i++) {
var paramValue = paramValues[i].split("=");
params[paramValue[0]] = paramValue[1];
}
}
params ? paramTarget = params['target'] : params = [];
self.sfw() ? self.querySet(queriesSFW) : self.querySet(queries);
if (paramTarget) {
self.navHistory.push(0);
self.currentStep(0);
self.goToTarget({target: paramTarget})
} else {
self.goToTarget({target: 0});
}
}
ko.applyBindings(new QueryViewModel());
At present the link2.com redirects to example.com I would like to replace the URL with the entry in the link2 attribute, so in this case test2.com but for other cases it would take the string shown for link and use that.
I'm trying to put two buttons underneath my google maps canvas(One of which is a dropdown button). Without the buttons markup, the Google Maps loads fine. When I add the buttons code, the map disappears. The map element and the buttons are all within the same container and columns, but on different rows.
<div class="container-fluid pushdown">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8"><div class="map" id="map"></div></div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div id="controls">
<button class="btn btn-default btn-lg dropdown-toggle location"type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><input type="checkbox" class="Check" name="traders[]" value="1"/><label class="CheckText">Trader1</label></li>
<li><input type="checkbox" class="traderCheck" name="traders[]" /><label class="traderCheckText">Trader2</label></li>
</ul>
<button onclick="location.href = 'search.html';" type="button" class="btn btn-default btn-lg" id="searchButton">Search <span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
And the JS:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 16,
disableDefaultUI: true
});
var marker = new google.maps.Marker({
position: {lat: -34.397, lng: 150.644},
draggable:true
});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
map.setCenter(pos);
marker.setPosition(pos);
marker.setMap(map);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
The map element CSS:
.map {
width: 100%;
height: 500px;
background-color: blue;
}
Also, I tried it with just the 3 columns on the second row(without the button elements) and the map disappeared . This means my problem is with Bootstrap.
Try this way .
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 16,
disableDefaultUI: true
});
var marker = new google.maps.Marker({
position: {lat: -34.397, lng: 150.644},
draggable:true
});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
map.setCenter(pos);
marker.setPosition(pos);
marker.setMap(map);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCrwOEvG-QIFrYPBCwRVTvXvSuzcnz38Xs&signed_in=true&callback=initMap"
async defer>
</script>
.map{
width: 100%;
height: 500px;
background-color: blue;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container-fluid pushdown">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8"><div class="map" id="map"></div></div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div id="controls">
<button class="btn btn-default btn-lg dropdown-toggle location"type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<input type="checkbox" class="Check" name="traders[]" value="1"/>
<label class="CheckText">Trader1</label></li>
<li>
<input type="checkbox" class="traderCheck" name="traders[]" />
<label class="traderCheckText">Trader2</label></li>
</ul>
<button onclick="location.href = 'search.html';" type="button" class="btn btn-default btn-lg" id="searchButton">Search <span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
<div class="col-md-2"></div>
I am using MeteorJS (So great :) ), to develop simple app. I want to use masonry, so I am using sjors:meteor-masonry package.
When I use this code everything works fine:
var itemsData = [
{
title: 'First item',
description: 'Lorem 1',
price: 20
},
{
title: 'Secounde item',
description: 'Lorem 2',
price: 40
},
{
title: 'Third item',
description: 'Lorem 3',
price: 10
},
{
title: 'Fourth item',
description: 'Lorem 4',
price: 10
},
{
title: 'Five item',
description: 'sit 4',
price: 10
}
];
Template.itemsList.helpers({
items: itemsData
});
Template.itemsList.rendered = function() {
var container = document.querySelector('#main');
var msnry = new Masonry( container, {
// options
columnWidth: 200,
itemSelector: '.item'
});
};
But when I change part (code) for Template.itemsList.rendered to masonry don't work:
Template.itemsList.helpers({
items: function() {
return Items.find();
}
});
Any ideas ?
EDIT
myapp/lib/collections/items.js
Items = new Mongo.Collection('items');
And it is populated whit data from mongoshell. Data is ok, but masonry dont work.
EDIT 2
Masonry stops animating on screen resize and grid is not working as it should. No errors.
myapp/client/templates
<template name="itemSingle">
<div id="profile-widget" class="panel item">
<div class="panel-heading">
</div>
<div class="panel-body">
<div class="media">
<div class="media-body">
<h2 class="media-heading">{{title}}</h2>
{{description}}
</div>
</div>
</div>
<div class="panel-footer">
<div class="btn-group btn-group-justified">
<a class="btn btn-default" role="button"><i class="fa fa-eye"></i> 172</a>
<a class="btn btn-default" role="button"><i class="fa fa-comment"></i> 34</a>
<a class="btn btn-default highlight" role="button"><i class="fa fa-heart"></i> 210</a>
</div>
</div>
</div>
</template>
<template name="itemsList">
<div id="main">
{{#each items}}
{{> itemSingle}}
{{/each}}
</div>
</template>
I encountered the same problem, without never finding the perfect solution.
I tried to resolve with the setTimout() workaround :
Template.main.rendered = function() {
setTimeout(function() {
$('#container').masonry({
columnWidth: 35,
itemSelector: '.thumb',
gutter: 10,
isFitWidth: false
});
}, 1);
}
I'd like to ask the user to choose among a few possibility but without breaking the style of my page. So I'd like to prompt an alert box or something like that BUT with a dropdown list () in it.
Is it possible?
If so how?
According to the documentation
Official Example
Add angular-bootstrap.js in your project, and 'ui.bootstrap' in your module
in HTML
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="open()">Open me!</button>
<button class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button class="btn btn-default" ng-click="open('sm')">Small modal</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
JS
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
};
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};