Listing Folders AngularJS - angularjs

I want to ng-repeat some kind of folders, here is my code : HTML:
<div class="container" ng-controller="miControlador">
<li class="left-menu-list-submenu">
<a class="left-menu-link" href="javascript: void(0);" ng-click="vm.getfolders();">
<i class="left-menu-link-icon fa fa-folder"></i>
Catalogs
</a>
<ul class="left-menu-list list-unstyled" style="margin-left:20px;" ng-repeat="fol in folders">
<li>
<a style="cursor:pointer;" ng-click="vm.more_folders();">{{fol}}</a>
<br />
<a style="cursor:default;color:black;" ng-repeat="more in more_folders">
<ul>
<li>{{more}}</li>
</ul>
</a>
</li>
</ul>
</li>
</div>
Js:
var vm = this;
vm.getfolders = function(){
$http({
method: 'GET' ,
url: 'link_folders.json',
})
.then(function successCallback(data) {
console.log("folders");
$scope.folders = data.data;
}, function errorCallback(response) {
console.log(response);
console.log('error');
});
};
vm.getfolders();
vm.more_folders = function(){
$http({
method: 'GET' ,
url: 'more_folders.json',
})
.then(function successCallback(data) {
console.log("more_folders");
$scope.more_folders = data.data;
}, function errorCallback(response) {
console.log(response);
console.log('error');
});
};
vm.more_folders();
link_folders.json:
[
"/visualizer/360",
"/visualizer/2D"
]
more_folders.json:
[
"/visualizer/360/Eva",
"/visualizer/2D/Ferb",
"/visualizer/360/Andy",
"/visualizer/2D/John"
]
Here is my plunker : https://plnkr.co/edit/SW7fqSajpYtQCJdY6wZb?p=preview
What i want - ng-repeat only this objects, which string is like above catalog, something like that -
/visualizer/2D
/visualizer/2D/Ferb
/visualizer/2D/John
Thanks for answers in advance!

What i want - ng-repeat only this objects, which string is like above
catalog, something like that -
/visualizer/2D
/visualizer/2D/Ferb /visualizer/2D/John
To get data filtered like that, All you need is a filter on your second ng-repeat
ng-repeat="more in more_folders | filter: fol ">
This will filter and then print the result which match your fol data.
To read more about filter, refer to this

Related

Angular JS get selected item value li html

I have angular list and want to get selected value of it but its only working on click event
<div ng-hide="hideCustomerDropdown" id="customer-dropdown" class="slidedown-menu">
<div class="slidedown-header">
</div>
<div class="slidedown-body">
<ul class="customer-list list-unstyled">
<li ng-repeat="customers in customerArray" >
<span class="fa fa-fw fa-user"></span>{{ customers.customer_name }} ({{ customers.customer_mobile || customers.customer_email }})
</li>
</ul>
</div>
</div>
controller:
$("#customer-name").on("click", function() {
$scope.showCustomerList(true);
});
$scope.showCustomerList = function (isClick) {
$http({
url: API_URL ,
method: "GET",
cache: false,
processData: false,
contentType: false,
dataType: "json"
}).
then(function(response) {
$scope.hideCustomerDropdown = false;
$scope.customerArray = [];
window.angular.forEach(response.data, function(customerItem, key) {
if (customerItem) {
$scope.customerArray.push(customerItem);
}
});
}, function(response) {
window.toastr.error(response.data.errorMsg, "Warning!");
});
};
Not sure to understand your question but try to re-render your template by adding
$scope.$apply();
at the end of your then function.

List folders under clicked folder

I want to ng-repeat only this catalogs of folders, which is clicked.
Here is my HTML :
<li class="left-menu-list-submenu">
<a class="left-menu-link" href="javascript: void(0);" ng-click="getfolders();">
<i class="left-menu-link-icon fa fa-folder"></i>
Catalogs
</a>
<ul class="left-menu-list list-unstyled" style="margin-left:20px;" ng-repeat="fol in folders">
<li>
<a style="cursor:pointer;" ng-click="more_folders();">{{fol}}</a>
<br />
<a style="cursor:default;color:black;" ng-repeat="more in more_folders | filter:fol">
<ul>
<li>{{more}}</li>
</ul>
</a>
</li>
</ul>
</li>
JS:
$scope.getfolders = function(){
$http({
method: 'GET' ,
url: 'link_folders.json',
})
.then(function successCallback(data) {
console.log("folders");
$scope.folders = data.data;
}, function errorCallback(response) {
console.log(response);
console.log('error');
});
};
$scope.getfolders();
$scope.more_folders = function(){
$http({
method: 'GET' ,
url: 'more_folders.json',
})
.then(function successCallback(data) {
console.log("more_folders");
$scope.more_folders = data.data;
}, function errorCallback(response) {
console.log(response);
console.log('error');
});
};
link_folders.json :
[
"/visualizer/360",
"/visualizer/2D"
]
more_folders.json :
[
"/visualizer/360/Eva",
"/visualizer/2D/Ferb",
"/visualizer/360/Andy",
"/visualizer/2D/John"
]
My plunker : https://plnkr.co/edit/N18FNNRgd1YuYKTKlc3H?p=preview
I want to list more_folders under the clicked folder, not under every folders
Thanks for answers in advance!
To make a toggle type folder structure, You need to maintain a selected folder somewhere in your controller. So you know which folder is clicked and if clicked again, then you can toggle it.
Here is how you can do it.
var miAp = angular.module('miAp', []);
miAp.controller('miControlador', function($scope, $http) {
var vm = this;
$scope.getfolders = function() {
$scope.folders = [
"/visualizer/360",
"/visualizer/2D"
];
};
$scope.getfolders();
$scope.more_folders = function() {
$scope.more_folders = [
"/visualizer/360/Eva",
"/visualizer/2D/Ferb",
"/visualizer/360/Andy",
"/visualizer/2D/John"
];
};
$scope.more_folders();
$scope.selectedFol = null;
$scope.toggle = (fol) => {
if ($scope.selectedFol === fol) {
$scope.selectedFol = null;
} else {
$scope.selectedFol = fol;
}
};
});
<html>
<head>
<meta charset="utf-8">
<title>Cookies</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script src="cookies.js"></script>
</head>
<body ng-app="miAp">
<div class="container" ng-controller="miControlador">
<li class="left-menu-list-submenu">
<a class="left-menu-link" href="javascript: void(0);" ng-click="getfolders();">
<i class="left-menu-link-icon fa fa-folder"></i> Catalogs
</a>
<ul class="left-menu-list list-unstyled" style="margin-left:20px;" ng-repeat="fol in folders">
<li>
<a style="cursor:pointer;" ng-click="toggle(fol);">{{fol}}</a>
<br />
<div id="childFolders" ng-show="selectedFol === fol">
<a style="cursor:default;color:black;" ng-repeat="more in more_folders | filter:fol">
<ul>
<li>{{more}}</li>
</ul>
</a>
</div>
</li>
</ul>
</li>
</div>
</body>
</html>
PS: If you want to toggle Root Folder as well, then you can maintain another variable in the same way for root.

Split in Angular JS

Here is my code below:
vm.getid = function(){
$http({
method: 'GET',
url: 'api.json',
})
.then(function successCallback(data) {
$scope.id = data.data;
console.log($scope.id);
$scope.split = $scope.id.split('/');
}, function errorCallback(response) {
console.log(response);
console.log('error');
});
};
And here is my html, but it does not work :
<div ng-repeat="s in split">
{{s}}
</div>
Plunker : http://plnkr.co/edit/g1t4pludTTIAJYKTToCK?p=preview
I want to use ng-repeat $scope.split
Thanks!
$scope.id is a list.
What you want to achieve is to get list of lists
The easy way to render it, to use 2 ng-repeats
What about:
<div ng-repeat="i in id">
<div ng-repeat="s in i.split('/')">
{{s}}
</div>
</div>
Demo 1
Or create split list as:
$scope.split = [];
angular.forEach($scope.id, function (item) {
$scope.split.push(item.split('/'));
});
so HTML will look like:
<div ng-repeat="sp in split">
<div ng-repeat="s in sp">
sub: {{s}}
</div>
</div>
Demo 2
printing out id you can see it is an array, not a string
["/big_big_package","/door/cooler","/door/chair","/door","/lets/go/deeper/than/this","/lets/go/deeper","/low"]
and trying to split it gives the following error in console
$scope.id.split is not a function
you can't split an array, you probably want to split each element in the array

How to hide an element while using a directive?

I have made a directive in which a single template is using for three functions in a controller. The model for the fields are same. I want to hide a field if the directive is called third time.
<div class="active tab-pane " ng-if="linkid === '1'">
<mallsonline-product info="active_products"></mallsonline-product>
</div>
<!--Active products list ends here -->
<!-- Get Inactive Products -->
<div class="active tab-pane" ng-if="linkid === '2'" >
<mallsonline-product info="inactive_products"></mallsonline-product>
</div>
<!--Get most viewed products ends here -->
<div class="active tab-pane" ng-if="linkid === '3'" >
<mallsonline-product info="mostviewed_products"></mallsonline-product>
</div>
My controller looks something like this
mainControllers.controller('DashboardController', ['$scope', '$http', '$routeParams', '$cookies', '$rootScope', function ($scope, $http, $routeParams, $cookies, $rootScope) {
/* Getting all grid links */
$scope.grLinks = function (Id) {
console.log(Id);
$scope.linkid = Id;
};
/* Getting all grid links ends here */
/* Getting all active product list */
$scope.active_product = function () {
$http.get('js/active-products.json',
{headers:
{'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': $rootScope.keyword_auth_token}
})
.success(function (data) {
$scope.active_products = data.items;
console.log($scope.active_products);
})
.error(function (data) {
console.log(data);
});
};
/* Getting all active product ends here */
/* Getting all inactive product */
$scope.inactive_product = function () {
$http.get('js/inactive-products.json',
{headers:
{'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': $rootScope.keyword_auth_token}
})
.success(function (data) {
$scope.inactive_products = data.items;
console.log($scope.inactive_products);
})
.error(function (data) {
console.log(data);
});
};
/* Getting all inactive product */
/* Getting all most viewed products */
$scope.most_viewed = function () {
$http.get('js/most-viewed.json',
{headers:
{'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': $rootScope.keyword_auth_token}
})
.success(function (data) {
$scope.mostviewed_products = data.items;
console.log($scope.mostviewed_products);
})
.error(function (data) {
console.log(data);
});
};
/* Getting all most viewed products */
$scope.active_product();
$scope.inactive_product();
$scope.most_viewed();
}]);
/* Active products / Inactive and most viewed Directive */
mainControllers.directive('mallsonlineProduct', function () {
return {
restrict: 'E',
scope: {
productInfo: '=info'
},
templateUrl: 'directives/dashboard_product.html'
};
});
/* Active products / Inactive directive ends here*/
and the template looks like this
<li class="bord-1-solid-ccc mg-bt-25" ng-repeat="active_products in productInfo">
<article class="aa-properties-item mg-top-0-notimp">
<a class="aa-properties-item-img" href="#/product">
<img alt="img" class="twohun-oneseventy" src="img/item/6.jpg">
</a>
<div class="aa-properties-item-content">
<div class="aa-properties-about padding-0-notimp">
<h5>{{active_products.name}}</h5>
<p class="font-size-11-imp"><i class="fa fa-building-o" aria-hidden="true"></i> {{active_products.mall.name}}</p>
<p class="font-size-11-imp"><i class="fa fa-map-marker" aria-hidden="true"></i> {{active_products.mall.address}}</p>
<p class="font-size-11-imp"><i class="fa fa-phone" aria-hidden="true"></i> {{active_products.shop.telephone}}</p>
<p class="font-size-11-imp"><i class="fa fa-eye" aria-hidden="true"></i> {{active_products.views}}</p>
</div>
</div>
</article>
</li>
all the fields are present in the model I want to show the active_products.view only when info="mostviewed_products". How can I achieve this ?
Had passed "linkid" in directive to know the current linkid value in template
Please make following changes
Directive
mainControllers.directive('mallsonlineProduct', function () {
return {
restrict: 'E',
scope: {
productInfo: '=info',
linkid:'=linkid'
},
templateUrl: 'directives/dashboard_product.html'
};
});
Html
<div class="active tab-pane " ng-if="linkid === '1'">
<mallsonline-product info="active_products" linkid="linkid"></mallsonline-product>
</div>
<!--Active products list ends here -->
<!-- Get Inactive Products -->
<div class="active tab-pane" ng-if="linkid === '2'" >
<mallsonline-product info="inactive_products" linkid="linkid"></mallsonline-product>
</div>
<!--Get most viewed products ends here -->
<div class="active tab-pane" ng-if="linkid === '3'" >
<mallsonline-product info="mostviewed_products" linkid="linkid"></mallsonline-product>
</div>
In template ('directives/dashboard_product.html')
<p class="font-size-11-imp"><i class="fa fa-eye" aria-hidden="true" ng-if="linkid==3"></i> {{active_products.views}}</p>
Hope this will resolve your issue.

ng Repeat on a list populated in a $http post shows empty html

I'm really newbie on angularjs, I'm trying to display a list of products so I call a service with $http and in the success function populate the $scope.
All seems works, the $scope.list contains the products but nothing is displayed
I already had a look at this Angularjs $http.get().then and binding to a list and everything looks the same except the "then" function that in my case should be the success function, I suppose. (because if I add that function I get $http(...).then(...).error is not a function).
<div ng-app="myApp" ng-controller="myCtrl">
<ul class="example-animate-container">
<li class="animate-repeat" ng-repeat="item in $scope.list as results">
item {{$index + 1}}:
{{item.Brand}}
</li>
<li class="animate-repeat" ng-if="results.length == 0">
<strong>No results found...</strong>
</li>
</ul>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
var url = "http://localhost:50083/service.asmx/StylesMock";
$scope.list = new Array();
$http({method: 'POST', url: url, headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }})
.success(function(xmlString){
var parser = new DOMParser();
var xml = parser.parseFromString(xmlString, "text/xml");
jsonData = xmlToJson(xml);
mapToScope($scope, jsonData);
})
.error(function(data, status, headers, config) { alert("error"); });;
function mapToScope($scope, data){
angular.forEach(data.ArrayOfStyleData.StyleData, function(value, key) {
$scope.list.push({
Brand : value.Style.Brand,
Name : value.Style.Name,
Image : value.Style.Image,
Price : value.Style.StylePrice
});
});
}
});
Any idea?
Is there a way to understand where the problem is? the console doesn't display errors
As I answered in my comment:
Replace $scope.list by list. By default, angular will look on the relevant controller $scope itself when referenced in your view.
So by specifying $scope.list in your view angular is looking for $scope.$scope.list in your controller
The problem is with your HTML remove $scope because it is already in a angular directive
ng-repeat=item in list
<div ng-app="myApp" ng-controller="myCtrl">
<ul class="example-animate-container">
<li class="animate-repeat" ng-repeat="item in list as results">
item {{$index + 1}}:
{{item.Brand}}
</li>
<li class="animate-repeat" ng-if="results.length == 0">
<strong>No results found...</strong>
</li>
</ul>

Resources