I'm looking to add contents like division, input text, button... in a tree structure in a web app. I was hoping to use Angular for this task.
HTML:
<script type="text/ng-template" id="tree_item_renderer.html">
{{data.name}}
<button ng-click="add(data)">Add node</button>
<button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button>
<ul>
<li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
</ul>
</script>
<ul ng-app="Application" ng-controller="TreeController">
<li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>
</ul>
JS:
angular.module("myApp", []).
controller("TreeController", ['$scope', function($scope) {
$scope.delete = function(data) {
data.nodes = [];
};
$scope.add = function(data) {
var post = data.nodes.length + 1;
var newName = data.name + '-' + post;
data.nodes.push({name: newName,nodes: []});
};
$scope.tree = [{name: "Node", nodes: []}];
}]);
Have a look at this fiddle
This picture below show you what I hope to attain!
Related
I'm using AngularJS 1.5.8.
I'm trying to bind {{card.reading}} in the view, but the data is rendered as text
html
<div ng-app="myApplication" ng-controller="postController as tarot">
<ul>
<li class="card" ng-repeat="card in tarot">
<img class="card" src="app/images/cards/{{card.value}}.png" alt="card.name">
<article>{{card.reading | unsafe}}</article>
</li>
</ul>
</div>`
JavaScript
var app = angular.module('myApplication', []);
app.controller('postController', function($scope, $http, $filter, $sce) {
$scope.$sce = $sce;
var url = './api.php/tarot';
$http.get(url).success(function(response) {
$scope.tarot = php_crud_api_transform(response).tarot;
});
});
app.filter('unsafe', function($sce){
return $sce.parseAsHtml;
});
exemple of JSON
{
"id":1,
"name": "Test",
"value": "1",
"reading": "<h2>Lorem Ipsum</h2><p>Lorem ipsum</p>"
}
Updating your HTML as such should do the trick..
<div ng-app="myApplication" ng-controller="postController as tarot">
<ul>
<li class="card" ng-repeat="card in tarot">
<img class="card" src="app/images/cards/{{card.value}}.png" alt="card.name">
<article ng-bind-html="card.reading"></article>
</li>
</ul>
</div>`
Thank you, it's solved now.
JavaScript
var app = angular.module('myApplication', ['ngSanitize'])
.controller('postController', ['$scope', '$http', '$sce',
function postController($scope, $http, $sce) {
var url = './api.php/tarot';
$http.get(url).success(function(response) {
$scope.tarot = php_crud_api_transform(response).tarot
});
$scope.explicitlyTrustedHtml = $sce.trustAsHtml();
}
]);
and the HTML as you suggested. :)
There is another solution . you can modify you code a little bit and it will work.
<div ng-app="myApplication" ng-controller="postController as tarot">
<ul>
<li class="card" ng-repeat="card in tarot">
<img class="card" src="app/images/cards/{{card.value}}.png" alt="card.name">
<article ng-bind-html="card.reading | unsafe"></article>
</li>
</ul>
</div>`
change your filter to ,
app.filter('unsafe', function($sce) {
return function(text) {
return $sce.trustAsHtml(text);
}
});
This will work.
The ng-repeat is only showing the first 2 elements of the array (there are 25). What is wrong?
I'm a newbie with Angular. I am lost with the cause of it, no errors in console. Any suggestions?
<div ng-app="myApp" id="posts" ng-controller="myCtrl as posts">
<li ng-repeat="post in posts" track by $index>
<p>{{posts.data.children[$index].data.ups}}</p>
<p>{{posts.data.children[$index].data.title}}</p>
</li>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
var vm = this;
vm.mydata = [];
$http.get("http:/www.reddit.com/.json")
.then(function(response) {
vm.mydata = response.data;
$scope.posts = vm.mydata;
//console.log(vm.mydata);
//console.table(vm.mydata);
}, function(response) {
$scope.posts = "Something went wrong";
});
});
</script>
Final code corrected. This is a very basic script to manage the extraction of posts in the Reddit's front page and displayed it in descending order by upvotes. Thank you all for your help! See code below:
<!DOCTYPE html>
<html>
<!-- _________________________________________________________-->
<!-- Framework: AngularJs -->
<!-- Author: Vanessa Torres -->
<!-- Date: March 30, 2016 -->
<!-- Description: Reddit's Front page posts extraction -->
<!-- _________________________________________________________-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" id="posts" ng-controller="myCtrl as posts">
<li ng-repeat="post in posts.data.children | orderBy:'-data.ups'" track by $index>
<p>{{post.data.ups}}</p>
<p>{{post.data.title}}</p>
<p>{{post.data.url}}</p>
</li>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.posts = [];
$http.get("http:/www.reddit.com/.json")
.then(function(response) {
$scope.posts = response.data;
console.table(vm.mydata);
//
}, function(response) {
$scope.posts = "Something went wrong";
});
});
</script>
</body>
</html>
Because you are iterating over posts which have basically two properties only ups and title
Use:
<li ng-repeat="post in posts.data.children" track by $index>
<p>{{post.data.ups}}</p>
<p>{{post.title}}</p>
</li>
The HTML should be as given below:
<div ng-app="myApp" id="posts" ng-controller="myCtrl as posts">
<li ng-repeat="post in posts track by $index">
<p>{{post.data.children.data.ups}}</p>
<p>{{post.data.children.data.title}}</p>
</li>
</div>
This iterates inside the posts array and the value of each post keys (ups and title) is displayed. Please check the documentation for ng-repeat (https://docs.angularjs.org/api/ng/directive/ngRepeat) for the correct format of using track by $index.
As a basic coding standard, you need not use var vm = this; along with $scope. If you are using the vm variable, then inside routes (or inside directives), where you associate each route (or directive) with a controller, you can add an extra field controllerAs for aliasing the controller. Use this alias name in the HTML code to access the vm variable. In your example, you can change it as given below:
<div ng-app="myApp" id="posts" ng-controller="myCtrl as postsCtrl">
<li ng-repeat="post in postsCtrl.posts track by $index">
<p>{{post.data.children.data.ups}}</p>
<p>{{post.data.children.data.title}}</p>
</li>
</div>
And in the scripts tag:
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($http) {
var vm = this;
vm.posts = '';
$http.get("http:/www.reddit.com/.json")
.then(function(response) {
vm.posts = response.data;
}, function(response) {
vm.posts = 'Something went wrong';
});
});
</script>
How to append the new content in angulularJS template in ng -repeat without destroying previous content
1.I want to dispaly the myvar data in every save click
<script>
var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope', '$http', function ($scope, $http, $filter, $rootScope) {
$scope.view= function () {
//some ajax calll
$scope.myvar = data;
};
}]);
</script>
</head>
<body ng-app="myApp" ng-controller="MyController">
<ul>
<li class="Status" ng-repeat="item in myvar">
{{item.var}}
</li>
</ul>
<button ng-click="view()">View More</button>
2.I please suggest me
According to ng-repead documentation (check Tracking and Duplicates section) "track by $index" is what you need
<li class="Status" ng-repeat="item in myvar track by $index">
{{item.var}}
</li>
You can also use "track by yuor_primary_key".
You need to push new element every time in array
Check this code: http://codepen.io/anon/pen/bEwBwQ
Controller
angular.module('DemoApp', ['ui.router', 'ngAnimate'])
.controller('DemoController', function($scope, $window, $state) {
$scope.myvar = [{"var" : 1}];
$scope.save = function() {
//some ajax calll
var v = {"var" : 1};
$scope.myvar.push(v);
};
});
HTML
<ul>
<li class="Status" ng-repeat="item in myvar">
{{item.var}}
</li>
</ul>
<button ng-click="save()">save</button>
I know this might have been already answered, but I have been unsuccessful in applying any solutions I found to my example. I am trying to enabled pagination on my products list page using UI Bootstrap and allow the user to filter said results with a search.
I have an object that is defined as such:
$scope.products = [{"_id": ObjectID("0000000"), "name":"Product", "description": "Product Description"}];
So far I have been able to pull my products from a restangular service, but I am getting the following console error: Error: [filter:notarray] Expected array but received {} when I added the pagination/search functionality. I know I need to convert my object to an array, but I have not been able to successfully convert it. The two examples I tried are posted below. Any help will be greatly appreciated.
My Products list view
<div ng-controller="paginationCtrl" class="row">
<div class="col-lg-12">
<div class="pull-left">
<form>
<div class="input-group product-searchs" ng-controller="SearchCtrl">
<label class="sr-only" for="searchProducts">Search</label>
<span class="input-group-addon search-icon"><i class="fa fa-search" aria-hidden="true"></i></span>
<input type="text" class="form-control" id="searchProducts" ng-model="search.name" placeholder="Search for products">
<span class="input-group-addon clear-icon">
<button type="button" ng-click="clearSearch()">
<i class="glyphicon glyphicon-remove" aria-hidden="true"></i>
</button>
</span>
</div>
</form>
</div>
</div>
<div class="col-lg-12">
<div class="list-group">
<a ui-sref="productDetails({id:product._id})" class="list-group-item clearfix" ng-repeat="product in filteredProducts = (products | filter: search | startFrom: (currentPage - 1) * itemsPerPage | limitTo: itemsPerPage | orderBy:orderProp)">
<div class="page-header clearfix">
<h2 class="pull-left"><i class="fa fa-diamond"></i> {{product.name}}</h2>
<span class="pull-right product-price {{product.price | currency}}</span>
</div>
{{product.description}}
</a>
</div>
</div>
<div class="col-lg-12">
<pagination class="pull-right" page="currentPage" total-items="totalItems" ng-model="currentPage" max-size="maxSize" ng-change="pageChanged() items-per-page="itemsPerPage" num-pages="numPages"></pagination>
</div>
</div>
I know I might have some extra dependencies injections, which I will remove once I get it working correctly.
My controller
angular.module('gemStoreApp')
.controller('paginationCtrl', ['$scope', '$log', 'filterFilter', 'productsService', 'Restangular', '$filter', function ($scope, $log, filterFilter', productsService, Restangular, $filter) {
$scope.search = {}
$scope.filteredProducts = [];
//Option 1
angular.forEach($scope.products, function(product) {
$scope.filteredProducts.push(product);
});
//Option 2
//for (var key in $scope.products) {
//var tempProducts = {};
//tempProducts[key] = $scope.products[key];
//$scope.filteredProducts.push(tempProducts);
//});
$scope.currentPage = 1;
$scope.maxSize = 100;
$scope.itemsPerPage = 10;
$scope.$watch('search', function(newVal, oldVal) {
$scope.filteredProducts = filterFilter($scope.products, newVal);
$scope.totalItems = $scope.filteredProducts.length;
}, true);
//I also tried this
//$scope.$watch('search, function(newSearch) {
//$scope.filteredProducts = $filter('filter')($scope.products, $scope.search);
// $scope.totalItems = $scope.filteredProducts.length;
//});
}])
My service
angular.module('gemStoreApp.productService',['ngResource'])
.factory('productsService', function(Restangular) {
return Restangular.service('products');
});
My Products Controller
angular.module('gemStoreApp')
.controller('ProductsCtrl', ['$scope', 'productsService', function ($scope, productsService) {
$scope.products = {};
productsService.getList().then(function(products){
$scope.products = products;
});
}]);
Added the Restangular setRestangularFields and setRequestInterceptor methods to my app.js file, which gets the search/filtering function working, but I am still getting an Expected array but received {} error
RestangularProvider.setRestangularFields({
id: '_id.$oid'
});
RestangularProvider.setRequestInterceptor(function(elem, operation) {
if (operation === 'put') {
elem._id = undefined;
return elem;
}
return elem;
});
I have created a Plunker version that appears to be working correctly..
Plunker example.
Created an updated Plunker with the issue I am seeing my local. The issue is that the Pagination is not working correctly. It is displaying only 10 items as I want it to, but clicking on the two does not switch to page 2. Plunker example
I saw several things wrong in your example. I believe you don't need the ng-controller="SearchCtrl" in your html.
Also, the main point of having the filter in your ng repeat is to not use the watch event of the search text input. So you should use the products array and apply the filter against it. If you want to use filteredProducts, I left a function in my example below. I initialized the variables since I don't have access to your restless apis.
var app = angular.module('myApp', []);
app.filter('startFrom', function() {
return function(input, start) {
if(input) {
start = +start; //parse to int
return input.slice(start);
}
return [];
}
});
app.controller('paginationCtrl', ['$scope', '$log', '$filter', function ($scope, $log, $filter) {
$scope.search = {name: "Product"}
$scope.products = [{"_id": "0000000", "name":"Product", "description": "Product Description"},
{"_id": "0000000", "name":"Product 2", "description": "Product Description 2"}];
$scope.filteredProducts = [];
$scope.currentPage = 2;
$scope.maxSize = 100;
$scope.itemsPerPage = 10;
$scope.startFrom = ($scope.currentPage - 1) * $scope.itemsPerPage;
var filterProducts = function(newVal){
$scope.filteredProducts.splice(0, $scope.filteredProducts.length);
angular.forEach($scope.products, function(product) {
if(product.name == newVal){
$scope.filteredProducts.push(product);
}
});
}
$scope.$watch('search.name', function(newVal, oldVal) {
filterProducts(newVal);
$scope.totalItems = $scope.filteredProducts.length;
}, true);
$scope.$watch('currentPage', function(newVal, oldVal) {
$scope.startFrom = ($scope.currentPage - 1) * $scope.itemsPerPage;
}, true);
$scope.$watch('itemsPerPage', function(newVal, oldVal) {
$scope.startFrom = ($scope.currentPage - 1) * $scope.itemsPerPage;
}, true);
}])
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="paginationCtrl as ctrl" class="row">
<div class="col-lg-12">
<div class="pull-left">
<div class="input-group product-searchs" >
<label class="sr-only" for="searchProducts">Search</label>
<span class="input-group-addon search-icon"><i class="fa fa-search" aria-hidden="true"></i></span>
<input type="text" class="form-control" ng-model="search.name" placeholder="Search for products" />
<span class="input-group-addon clear-icon">
<button type="button" ng-click="clearSearch()">
<i class="glyphicon glyphicon-remove" aria-hidden="true">test</i>
</button>
</span>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="list-group">
<a ui-sref="productDetails({id:product._id})" class="list-group-item clearfix" ng-repeat="product in products | filter: search.name | limitTo: itemsPerPage | startFrom: 0 ">
{{product.name}}
{{product.description}}
<br/>
</a>
</div>
</div>
<div class="col-lg-12">
<pagination class="pull-right" page="currentPage" total-items="totalItems" ng-model="currentPage" max-size="maxSize" ng-change="pageChanged()" items-per-page="itemsPerPage" num-pages="numPages"></pagination>
</div>
</div>
</div>
</body>
</html>
Edit
After watching your plunker, you do not need to add the filteredProducts to your controller since you are doing the filtering in your view. By adding the filteredProducts to your view, it will also be accessible in your controller with $scope.filteredProducts.
So replace the bottom of your html with the code below and also delete all that code that handles the filteredProducts from your controller:
<div class="col-lg-12">
<div class="list-group">
<a ui-sref="productDetails({id:product._id})" class="list-group-item clearfix" ng-repeat="product in filteredProducts = (products | filter: search.name | limitTo: itemsPerPage | startFrom: 0) ">
{{product.name}}<br/>
{{product.description}}
</a>
</div>
</div>
<div class="col-lg-12">
<pagination class="pull-right" page="currentPage" total-items="filteredProducts.length" ng-model="currentPage" max-size="maxSize" ng-change="pageChanged()" items-per-page="itemsPerPage" num-pages="numPages"></pagination>
</div>
If you want to do everything manually (which I do not recommend), you have to change your html to be product in filteredProducts, when it starts add all your products to the filteredProducts list and keep your code in the controller. Also you will have to fill the filteredProducts list again when the search is empty.
I am trying to share data between two controllers (child1 and child2) which are children of one common controller (parent).
index.html is :
<div ng-controller="parent">
<ul>
<p>Parent controller</p>
<li ng-repeat="item in items">
{{item.id}}
</li>
</ul>
<div ng-controller="child1">
<ul>
<p>First DIV :</p>
<li ng-repeat="item in items">
{{item.id}}
</li>
</ul>
</div>
<div ng-controller="child2">
<ul>
<p>Second DIV :</p>
<li ng-repeat="item in items">
{{item.id}}
</li>
</ul>
</div>
</div>
I have defined three controllers as (parent, child1 and child2) :
var myApp = angular.module('myApp', []);
myApp.controller('parent',['$scope', function($scope) {
$scope.items = [
{'id':1},
{'id':2},
{'id':3},
{'id':4}
];
$scope.items.push({'id':10});
$scope.myfun = function() {
setTimeout(function(){
$scope.items.push({'id':20});
alert("inserting 20....!");
},3000);
}
$scope.myfun();
}]);
myApp.controller('child1', ['$scope', function($scope) {
$scope.items = $scope.$parent.items;
}]);
myApp.controller('child2', ['$scope', function($scope) {
$scope.items = $scope.$parent.items;
}]);
But the page is not showing anything. What is wrong with this code?
Use angular's $timeout service instead of setTimeout:
myApp.controller('parent',['$scope','$timeout', function($scope, $timeout) {
$scope.items = [
{'id':1},
{'id':2},
{'id':3},
{'id':4}
];
$scope.items.push({'id':10});
$scope.myfun = function() {
$timeout(function(){
$scope.items.push({'id':20});
alert("inserting 20....!");
},3000);
}
$scope.myfun();
}]);