The below code pulls an array from firebase using ng-repeat and filters for the userId.
The issue is that when I use "!" it does not filter out the user, but instead nothing shows up. In other words when I replace the below ng-repeat filter:
ng-repeat="(id,item) in ideas| filter:user.google.id"
with this ng-repeat filter, with the intention of filtering out the user, it no longer works.
ng-repeat="(id,item) in ideas| filter:user.google.id"
How can I filter out list for any item that contains the user id?
See below and in this codepen for the full code: http://codepen.io/chriscruz/pen/LERrBW
HTML
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.0.2/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body ng-controller="ctrl">
<p>Welcome, {{user.google.displayName}}</p>
<button class="btn btn-lg btn-danger" id="Gbtn" ng-click="GoogleLogin()">
<i class="fa fa-google-plus-square fa-2x"></i>
Login with Google</button>
<table>
<tr class="item" ng-repeat="(id,item) in ideas| filter:user.google.id">
<td>{{item.idea}}</td>
</tr>
</table>
</body>
</html>
Javascript:
var app = angular.module("app", ["firebase"]);
app.constant("FBURL", "https://crowdfluttr.firebaseio.com/");
app.service("Ref", ["FBURL", Firebase]);
app.factory("Auth", ["$firebaseAuth", "Ref", function($firebaseAuth, Ref) {
return $firebaseAuth(Ref);
}]);
app.factory("Ideas", ["$firebase", "Ref", function($firebase, Ref) {
var childRef = Ref.child('ideas');
var lst = $firebase(childRef).$asArray();
return lst
}]);
app.controller("ctrl", ["$scope","$firebase","Ideas","Auth", function($scope,$firebase,Ideas,Auth) {
$scope.ideas = Ideas;
$scope.auth = Auth;
$scope.idea = "";
$scope.GoogleLogin = function () {
$scope.auth.$authWithOAuthPopup('google')()
};
}]);
app.run(["$rootScope", "Auth", function($rootScope, Auth) {
$rootScope.user = Auth.$getAuth();
}]);
Related
Any idea what I am doing wrong here?
It must be something simple but I have been trying a bunch of different combinations for hours.
Thanks in advance.
https://plnkr.co/edit/3NkmhLVLTZe3aMoiK9Ff?p=preview
app.js
var app = angular.module('fishHouseMonitorApp', []);
app.controller('fishHouseMonitorController', function($scope, $http) {
$http.get("http://www.eastcentralmdaa.org/fishhousemonitor/api/v1/sensormeasurements")
.then(function(response) {
$scope.sensormeasurements = response.data;
// do some error checking to ensure there is an element 0?
$scope.selectedElement = $scope.sensormeasurements[0];
});
});
index.html
<!DOCTYPE html>
<html ng-app="fishHouseMonitorApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<div class="container" ng-controller="fishHouseMonitorController">
<div class="row">
<ul class="list-group">
<li class="list-group-item" ng-repeat="sensormeasurement in sensormeasurements" ng-click="selectContact($index)">
<span>{{ sensormeasurement.sensorMeasurementDateTime }}</span>
</li>
</ul>
</div>
</div>
</body>
</html>
This works:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
{{ myData }}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("https://jsonplaceholder.typicode.com/users").then(function(response) {
$scope.myData = response.data;
});
});
</script>
</body>
</html>
This does not:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
{{ myData }}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.eastcentralmdaa.org/fishhousemonitor/api/v1/sensormeasurements").then(function(response) {
$scope.myData = response.data;
});
});
</script>
</body>
</html>
even though https://jsonlint.com/ validates http://www.eastcentralmdaa.org/fishhousemonitor/api/v1/sensormeasurements as valid JSON
You cannot access an HTTP destination while running your application on HTTPS. Change your protocol to HTTPS and you will be fine:
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("https://jsonplaceholder.typicode.com/users").then(function(response) {
$scope.myData = response.data;
});
});
</script>
I did not fully understand the problem.I hope this helps
app.js
var app = angular.module('fishHouseMonitorApp', []);
app.controller('fishHouseMonitorController', function($scope, $http) {
$http.get("http://www.eastcentralmdaa.org/fishhousemonitor
/api/v1/sensormeasurements")
.then(function(response) {
$scope.sensormeasurements = response.data[0];
// do some error checking to ensure there is an element 0?
});
});
index.html
<ul class="list-group">
<li class="list-group-item" ng-model="sensormeasurements" ng-click="selectContact($index)">
<span>{{ sensormeasurement.sensorMeasurementDateTime }}</span>
</li>
</ul>
Im working in laravel and i start to implement angular to my frontend.
This is the route:
Route::get('test', 'WorkController#inicio');
My controller function:
public function inicio()
{
$works = new Work;
$works = Work::Paginate(10);
return view('test', compact('works'));
}
And the view where i what to display the database information.
<head>
<title>test</title>
<link href="/css/lib.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
</head>
<body>
<h1>test</h1>
<h2>test</h2>
<div ng-app="myApp" ng-controller="myController as controller">
<ul>
<li ng-repeat="datos in data">
<a class="floating-box">#{{datos.client}}</a>
</li>
</ul>
</div>
<hr/>
</body>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myController", function($scope, $http) {
$scope.data = [];
$scope.buscador = '';
$http.get("<?=env('APP_URL')?>" + '/test').then(function(datos) {
console.log(datos.data.data);
$scope.data = datos.data.data;
console.log($scope.data);
})
});
</script>
But then i get this in console:
GET http://localhost/test net::ERR_CONNECTION_REFUSED.
and the information isnt in the view.
I have attached plunker link for that.
This is my html
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-cookies.js"></script>
<script src="https://rawgithub.com/angular-translate/bower-angular-translate/master/angular-translate.min.js"></script>
<script src="https://rawgithub.com/angular-translate/bower-angular-translate-storage-cookie/master/angular-translate-storage-cookie.js"></script>
<script src="https://rawgithub.com/angular-translate/bower-angular-translate-loader-static-files/master/angular-translate-loader-static-files.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="someController">
<div id="parent">
<h1>{{'HEADLINE' | translate }}</h1>
<button ng-click="switchLanguage('de_DE')" translate="LANG_DE_DE"></button>
<button ng-click="switchLanguage('en_US')" translate="LANG_EN_US"></button>
<button id="myButton" class="float-right submit-button" ng-click="showDiv()" >Click here</button>
</div>
<script type="text/javascript">
</script>
<div id="hello">
<span name="new" id="newpage" style="display: none;">
<h1 class="xx">{{'HELLO'| translate }}</h1>
</span>
</div>
</body>
</html>
app.js
angular.module('myApp', ['pascalprecht.translate', 'ngCookies']);
angular.module('myApp').config(['$translateProvider',
function($translateProvider) {
var language = (window.navigator.userLanguage || window.navigator.language).toLowerCase();
console.log(language);
$translateProvider.registerAvailableLanguageKeys(['de_DE', 'en_US'], {
'en_US': 'en_US',
'en_UK': 'en_US',
'en': 'en_US',
'de': 'de_DE'
});
$translateProvider.useStaticFilesLoader({
prefix: 'lang_',
suffix: '.json'
});
$translateProvider.preferredLanguage('en_US');
// $translateProvider.use('de');
$translateProvider.useCookieStorage();
$translateProvider.fallbackLanguage("de_DE");
}
]);
angular.module('myApp').controller('someController', ['$scope', '$translate',
function($scope, $translate) {
$scope.switchLanguage = function(key) {
$translate.use(key);
};
$scope.showDiv = function()
{
var html = document.getElementById("newpage").innerHTML;
var container = document.createElement("span");
container.innerHTML = html;
document.getElementById("parent").appendChild(container);
}
}
]);
lang_de_DE.json
{
"HEADLINE": "Überschrift",
"LANG_DE_DE": "Sprache: Deutsch",
"LANG_EN_US": "Sprache: Englisch",
"HELLO" :"Neue Seite"
}
lang_en_US.json
{
"HEADLINE": "Headline!",
"LANG_DE_DE": "Lang: German",
"LANG_EN_US": "Lang: English",
"HELLO" :"New page"
}
In this New page text (show div function) wont update when i change language.
Plunker link https://plnkr.co/edit/1pBWUFZMbHx4zKzNRKzD?p=preview
Use ng-repeat, do not manipulate DOM inside the controller.
Change your span in something like this:
<span ng-repeat="div in divs">
<h1 class="xx">{{'NEWPAGE'| translate }}</h1>
</span>
and your showDiv function:
scope.divs = [];
$scope.showDiv = function()
{
$scope.divs.push({});
}
Updated plunker here.
You need clearly to think in a more angularjs way. DO NOT pollute your controller with jquery and dom manipulation code. That's not for what angularjs is for.
Read the docs on ng-repeat here.
Hi we are wanting to do server side paging with Angular's UI Bootstrap pagination directive. We know how to create a RESTful endpoint to serve up the pages from our servers but didn't see any documentations about how to hook that endpoint up to Angular's UI Bootstrap pagination directive.
Please see small demo below
angular.module('app', ['ui.bootstrap']);
angular.module('app').controller('PaginationDemoCtrl', function($scope, $http) {
$scope.currentPage = 1;
$scope.limit= 10;
$scope.tracks = [];
getData();
function getData() {
$http.get("https://api.spotify.com/v1/search?query=iron+&offset="+($scope.currentPage-1)*$scope.limit+"&limit=20&type=artist")
.then(function(response) {
$scope.totalItems = response.data.artists.total
angular.copy(response.data.artists.items, $scope.tracks)
});
}
//get another portions of data on page changed
$scope.pageChanged = function() {
getData();
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<body ng-app="app">
<div ng-controller="PaginationDemoCtrl">
<h4>Sample Server Pagination</h4>
<pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="100"></pagination>
<ul>
<li ng-repeat="track in tracks" style="list-style:none">
<img ng-src="{{track.images[2].url}}" alt="" width="160"/>
{{track.name}}</li>
</ul>
</div>
</body>
angular.module('app', ['ui.bootstrap']);
angular.module('app').controller('PaginationDemoCtrl', function($scope, $http) {
$scope.currentPage = 1;
$scope.tracks = [];
getData();
function getData() {
$http.get("https://ws.spotify.com/search/1/track.json?q=kaizers+orchestra&page=" + $scope.currentPage)
.then(function(response) {
$scope.totalItems = response.data.info.num_results
angular.copy(response.data.tracks, $scope.tracks)
});
}
//get another portions of data on page changed
$scope.pageChanged = function() {
getData();
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<body ng-app="app">
<div ng-controller="PaginationDemoCtrl">
<h4>Sample Server Pagination</h4>
<pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="100"></pagination>
<ul>
<li ng-repeat="track in tracks">{{track.name}}</li>
</ul>
</div>
</body>
I'm having trouble using routeProvider to display a modal window. I am displaying a table list of ingredients and hoping that by clicking on an ingredient, I can display an "update" modal. The table displays properly and I can even view a single ingredient outside of a modal context but as soon as I try and get the modal working everything falls apart - in fact, the modal doesn't even properly receive its "ingredient" variable. When clicking on a table row the HTML for the modal is displayed like it's a separate page.
app.js:
angular.module('IngredientsApp', [
'IngredientsApp.controllers',
'IngredientsApp.services',
'ngRoute',
'ui.bootstrap'
]).config(['$routeProvider', function($routeProvider) {
$routeProvider.
when("/ingredients", {templateUrl: "partials/ingredients.html", controller: "ingredientsController"}).
when("/ingredient/:id", {templateUrl: "partials/ingredient.html", controller: "ingredientController"}).
otherwise({redirectTo: '/ingredients'});
}]);
services.js:
angular.module('IngredientsApp.services', []).factory('ingredientAPIservice', function($http) {
var ingredientAPI = {};
ingredientAPI.getIngredients = function() {
return $http.get('/ingredient');
}
ingredientAPI.getIngredient = function(id) {
return $http.get('/ingredient/'+id+'/edit');
}
return ingredientAPI;
});
index.html
<!doctype html>
<html lang="en">
<head>
<title>Our Recipes</title>
<script type="text/javascript" src="/js/angular.min.js"></script>
<script type="text/javascript" src="/js/angular-route.min.js"></script>
<script type="text/javascript" src="/js/angular-bootstrap.min.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src="/js/services.js"></script>
<script type="text/javascript" src="/js/controllers.js"></script>
<link rel="stylesheet" type="text/css" href="/css/styles.css" />
</head>
<body ng-app="IngredientsApp">
<ng-view></ng-view>
</body>
</html>
ingredients.html
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Existing Ingredients</th>
<th><input type="text" ng-model="descriptionFilter" placeholder="Search..."/></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="i in ingredientsList | filter: searchFilter">
<td>
<a href="/#/ingredient/{{i.Id}}">
{{i.Description}}
</a>
</td>
<td>Created at {{i.CreatedAt}}</td>
</tr>
</tbody>
</table>
ingredient.html
<script type="text/ng-template">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
{{ingredient.Description}}
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Dismiss</button>
</div>
</script>
controllers.js:
angular.module('IngredientsApp.controllers', []).controller('ingredientsController', function($scope, ingredientAPIservice) {
$scope.descriptionFilter = null;
$scope.ingredientsList = [];
$scope.searchFilter = function (ingredient) {
var keyword = new RegExp($scope.descriptionFilter, 'i');
return !$scope.descriptionFilter || keyword.test(ingredient.Description);
};
ingredientAPIservice.getIngredients().success(function (response) {
//Dig into the responde to get the relevant data
$scope.ingredientsList = response;
});
})
var ingredientController = function($scope, $routeParams, $modal, ingredientAPIservice) {
$scope.id = $routeParams.id;
$scope.ingredient = null;
ingredientAPIservice.getIngredient($scope.id).success(function (response) {
$scope.ingredient = response;
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'partials/ingredient.html',
controller: 'ingredientModalController',
size: size,
resolve: {
ingredient: function () {
console.log($scope.ingredient);
return $scope.ingredient;
}
}
});
}
});
}
var ingredientModalController = function($scope, $modalInstance, ingredient) {
$scope.ingredient = ingredient;
$scope.ok = function () {
$modalInstance.close($scope.ingredient);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
I believe your issue is in app.js. Your route change causes the modal template (partials/ingredients.html) to be the only template displayed in ui-view. For the modal to work, you need to have the ingredients template nested within the ingredient template so both templates can be displayed at the same time. There are multiple ways to accomplish this.
If you are willing to give up the route change, just remove
when("/ingredient/:id", {templateUrl: "partials/ingredient.html", controller: "ingredientController"})
If you need the url to change, then I would look at doing it manually through the build in location service. https://docs.angularjs.org/guide/$location
You could just call a function that changes the url on click of an ingredient.