angular display ng-repeat only after clicking a button - javascript

I have a controller that runs with the page load. I would like to change it, so only after clicking a button the function will called and the results will be displayed.
HTML:
<div ng-controller="MyController">Files on server: {{ mydata }}
</div>
<ul ng-controller="MyController as controller">
<li ng-repeat="data in controller.mydata">{{ data }}</li>
</ul>
JS:
app.controller('MyController', function($http) {
var vm = this;
vm.mydata = [];
$http.get('list')
.then(function(result) {
console.log(result);
vm.mydata = result.data;
});
});

i think you need to put your http call in some function activated onclik
HTML:
<div ng-controller="MyController as controller">
<ul>
<li ng-repeat="data in controller.mydata">{{ data }}</li>
</ul>
<button ng-click="controller.getData()">get data</button>
</div>
controller:
app.controller('MyController', function($http) {
var vm = this;
vm.mydata = [];
//http call is in the 'getData' function
vm.getData = function(){
$http.get('list')
.then(function(result) {
console.log(result);
vm.mydata = result.data;
});
}

Like that :
HTML
<div ng-controller="MyController">Files on server: {{ mydata }}
</div>
<input type="button" value="Click" id="refresh"/>
<ul ng-controller="MyController as controller">
<li ng-repeat="data in controller.mydata">{{ data }}</li>
</ul>
Java script
app.controller('MyController', function ($http) {
var vm = this;
vm.mydata = [];
vm.refresh = function () {
$http.get('list')
.then(function (result) {
console.log(result);
vm.mydata = result.data;
});
};
});

Use ng-click with a button to define a function to be called on click and call your $http.get inside that function.
<button ng-click="myFunction()">Click</button>
And in your controller
vm.myFunction = function() {
$http.get('list').then(function(result) {
console.log(result);
vm.mydata = result.data;
});
});

You could simply toggle the visibility. That way you can load the data upfront and show it when you want to.
<ul ng-if="!controller.hide">
<li ng-repeat="data in controller.mydata">{{ data }}</li>
</ul>
<button ng-click="controller.hide=false">Show Me!</button>
I removed the ng-controller directive from your ul. I would put that on a higher level element that wraps all of the other elements.

It´s better to make only one call to the server, so you could get the data from the beginning.
You could toggle the visibility instead of making an api call.
<ul ng-controller="MyController as controller">
<a href="#" ng-click="controller.display == !controller.display">
Toggle Info
</a>
<li ng-if="controller.display" ng-repeat="data in controller.mydata">{{ data }}</li>
</ul>
And decelerate the display as:
vm.display = false;
Why the negation?
With that the a tag will toggle the visibility of the li elements.

Related

Compile error for Angular JS with js/ajax.js and index.html

When I compile my code there is an error with angular.
The code is written from a book, and it works when I load the page using the code at the end of the question.
There seems to be two issues from what I have read. Where do I put the $scope and $compile code?
Mostly, the question is how do I load a document ready trigger with a button for angular JS?
Or should I always load the angular js and hide the code?
<div id="myTabs">
<div class="menu">
<ul class= "tabs">
<li >LIST</li>
<li >GRID</li>
<li >GRID</li>
</ul>
</div>
<div class="container" style="margin-top:100px">
<div id="a">
</div>
<div id="b">
<ul class="gallery-items" id="grid">
</ul>
</div>
<div id="c" >
<div ng-controller="myController">
<div ng-repeat="item in items">
<img ng-src="{{item.img}}" />
{{item.description}}<br>
Rating: {{item.rating}} stars<br>
<span ng-repeat="idx in stars"
ng-class=
"{true: 'star', false: 'empty'}[idx <= item.rating]"
ng-click="adjustRating(item, idx)">
</span>
<hr>
</div>
</div>
</div>
</div>
ajax.js has a function that calls the #c tab to load
$(document).ready(function(){
$('#listC').click(function(){
angular.module('myApp', [])
.controller('myController', ['$scope', function($scope) {
$scope.stars = [1,2,3,4,5];
$scope.items = [100];
$.ajax({
type:'post',
url:'changeView.php',
data:{action: 'getGrid'},
success:function(data){
var data = JSON.parse(data);
for (i=0;i<data.length;i++) {
var imageLI = makeImage(data[i]['imageID'], data[i]['name'], data[i]['desc']);
$scope.items[i] = imageLI;
}
}
});
console.log($scope.items);
$scope.adjustRating = function(item, value){
item.rating = value;
};
}]);
});
$('#listC').trigger('click');
function makeImage(ID, name, description){
var image = {
description: description,
img: '../uploads/'+name,
rating: 4
}
return image;

orderBy is not updating when I click on a button

Hope somebody can help me with my problem.
I am trying to order my list on specific data and this works fine when I say upfront on what it needs to be sorted.
But when I do this when I click on a button it doesn't order my list in anyway.
Hope somebody can help me with this problem.
this is my app.js code:
app.controller("ListController", function ($scope, $interval, $http, myService, OpenDataService) {
myService.async().then(function (d) {
OpenDataService.opendata = d;
$scope.openData = OpenDataService.opendata;
$scope.order = "";
});
$scope.orderOptions = ["gemeente", "locatie"];
$scope.change = function (value) {
console.log("change");
$scope.order = value;
console.log(value);
}
$scope.test = OpenWifiData;
});
And here is the html code I use:
<li ng-click="change('gemeente')"><a>locatie</a></li>
<div id="WifiSpots" ng-controller="ListController" class="col-sm-12 col-md-4 col-md-offset-2">
<div ng-repeat="item in openData | filter:searchText | orderBy: order">
<ul class="list-group">
<li class="list-group-item">
<div class="row wifiSpots" >
<div class="col-md-2">{{item.locatie}}</div>
<div class="col-md-2">{{item.gemeente}}</div>
<div clas="col-md-1">{{item.distance}}</div>
<div clas="col-md-1">{{item.duration}}</div>
<button ng-controller="MapController" ng-click="calculateAndDisplayRoute(item.objectid)" class="btn ">Selecteer</button>
</div>
</li>
</ul>
</div>
</div>
The 'order' in the ng-repeat directive is in a different scope than the one in your controller. Add a wrapper class like so:
$scope.opts = {order: ""};
Then in your change function update that instead:
$scope.opts.order = value;
In the html:
orderBy:opts.order

How to add links in angular js with dynamic output

I have page say categories here I'm loading categories from my api request
on clicking first category I need to load some other page say products and need to load products from some other api.
When I am linking it with simple href it displays
{{ product.productname }}
MyController page :
var app = angular.module('myApp', []);
app.controller('CategoryController', function($scope, $http) {
$http.get("http://192.168.1.112/estore/api/get-categories")
.success(function(response) {$scope.categories = response.categories;});
});
app.controller('ProductController', function($scope, $http) {
$scope.id = 2;
$http.get("http://192.168.1.112/estore/api/get-products?id=id")
.success(function(response) {$scope.products = response.categories;});
});
My index page :
<body ng-app="myApp">
<div role="main" class="ui-content" ng-controller="CategoryController">
<ul class="cat" ng-repeat="x in categories">
<li>
{{ x.name }}
</li>
</ul>
</div>
</body>
my listpage :
<body ng-app="myApp">
<div role="main" class="ui-content" ng-controller="ProductController">
<ul class="cat" ng-repeat="pdts in products">
<li>
{{ pdts.productname }}
</li>
</ul>
</div>
</body>
There are two options:-
1) you can use $state.go() and pass id parameters to products state.
2) you can use $cookiestore and set the id in the cookie and later retrieve in the products state.
var app = angular.module('myApp', []);
app.config(['$stateProvider',function($stateProvider){
$stateProvider.state('products',{
url: '/products/:ID',
title: 'productlist',
templateUrl: 'app/views/product/productlist.html',
controller:'productlistController'
})
}]);
app.controller('CategoryController', function($scope, $http ,$state) {
$http.get("http://192.168.1.112/estore/api/get-categories")
.success(function(response){
$scope.categories = response.categories;
});
$scope.redirectTo = function(id){
$state.go('products', {ID : id});
};
});
app.controller('ProductController', function($scope, $http , $state) {
var id = $state.params.ID;
$http.get("http://192.168.1.112/estore/api/get-products?id="+id)
.success(function(response) {
$scope.products = response.products;
});
});
INDEX PAGE
<body ng-app="myApp">
<div role="main" class="ui-content" ng-controller="CategoryController">
<ul class="cat" ng-repeat="x in categories">
<li>
<a ng-click="redirectTo(x.id)"> {{ x.name }} </a>
</li>
</ul>
</div>
</body>

Cannot get angular.isString to work with ng-repeat

I'm trying to do an angular.isString comparison with ng-if inside an ng-repeat. But all items in the array are returned.
So I tried to just output the angular.isString result but it doesn't output anything.
Here is what I would like to do:
<li ng-repeat="item in data">
<div ng-if="angular.isString(item)">
{{ item }}
</div>
</li>
function MyCtrl($scope)
{
$scope.data =
[
"Hello",
"-",
123
];
}
Here's a fiddle: http://jsfiddle.net/m6k13whh/2/
Angular expressions are evaluated against the scope. You can create a function which returns angular.isString:
<li ng-repeat="item in data">
<div ng-if="isString(item)">
{{ item }}
</div>
</li>
$scope.isString = function(item) {
return angular.isString(item);
}
You can also just filter all of the items with that function:
<li ng-repeat="item in data | filter:isString">
<div>
{{ item }}
</div>
</li>
The best solution is to pass reference to angular method into scope
$scope.isString = angular.isString
then in partial you can just use ng-if="isString(item)"
http://plnkr.co/edit/5keCUQrHQnbl4Wg0oKp1?p=preview
Hej,
Make sure you only import one library.
Because in the fiddle you have include two angular scripts.
Remove the one in External Resources!
<div ng-app="myApp" ng-controller="MyCtrl">
<!-- this if comparison is what I want to do -->
<ul>
<li data-ng-repeat="item in data">
<div data-ng-if="isString(item)">
{{ item }}
</div>
</li>
</ul>
</div>
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.data = [
"Hello",
"-",
123
];
$scope.isString = function(value) {
return angular.isString(value);
};
});

AngularJS push item does not work

I have put all necessary files into a single file. I want to push item into array when the user clicks on a button. Here is the content:
When I click on the button, nothing happens. Also the data is not repeated/looped and {{}} is shown in angular which means there is a problem.
<script type="text/javascript" src="angular.js" ></script>
<div data-ng-app="App">
<div data-ng-controller="MyController">
<ul data-ng-repeat="one in names">
<li>{{ one.first }}</li>
</ul>
</div>
</div>
<input type="text" data-ng-model="Namer.name"/>
<input type="submit" data-ng-click="AddName()"/>
<script type="text/javascript">
var App = angular.module("App", []);
App.controller("MyController", function($scope){
$scope.names = [
{ first : "Thomas"},
{ first : "Geferson"},
{ first : "Jenny"},
{ first : "Maria"},
];
$scope.AddName = function(){
$scope.names.push({
name : $scope.Namer.name;
});
};
});
</script>
Working DEMO
var App = angular.module("App", []);
App.controller("MyController", function ($scope) {
$scope.names = [{
first: "Thomas"
}, {
first: "Geferson"
}, {
first: "Jenny"
}, {
first: "Maria"
}];
$scope.AddName = function () {
$scope.names.push({
first: $scope.Namer.name
});
};
});
You need to move your data-ng-click inside Controller.Also you had some syntax issues.That is also i fixed (To work with IE ALSO)
<div data-ng-app="App">
<div data-ng-controller="MyController">
<ul data-ng-repeat="one in names">
<li>{{ one.first }}</li>
</ul>
<input type="text" data-ng-model="Namer.name" />
<input type="submit" data-ng-click="AddName()" />
</div>
</div>
Move your inputs to inside your MyController so that it executes code in the scope created by the controller:
<div data-ng-app="App">
<div data-ng-controller="MyController">
<ul data-ng-repeat="one in names">
<li>{{ one.first }}</li>
</ul>
<input type="text" data-ng-model="Namer.name"/>
<input type="submit" data-ng-click="AddName()"/>
</div>
</div>
Another mistake is that you need to change name to first to match with your existing object
$scope.AddName = function(){
$scope.names.push({
first : $scope.Namer.name //change to first and remove the ;
});
};
DEMO

Categories