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.
Related
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
I am trying to show angular Post data whenever a tab is clicked using ng-click event.
But it's not working.
What am i doing wrong here?.
First part of code works fine for switching Tabs, But i also want to show dynamic response when any tab is clicked & use it's tabNum as ?id=tabNum in ajax POST
angular.module('tabApp', [])
.controller('TabController', ['$scope', function($scope, $http) {
$scope.tab = 1;
$scope.setTab = function(newTab){
$scope.tab = newTab;
};
$scope.isSet = function(tabNum){
return $scope.tab === tabNum;
};
}]);
I HAVE PROBLEM WITH FOLLOWING CODE, WHERE SHOULD I PLACE IT ?
$http.get('http://localhost:8080/welcome.html?id=$tabNum')
.success(function(data, status, headers, config) {
$scope.tab = data;
})
.error(function(data, status, headers, config) {
// log error
}); }]);
this is my HTML page
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>MY
Reports
<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container" ng-app="tabApp">
<div class="row" ng-controller="TabController">
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li ng-class="{ active: isSet(1) }">
<a href ng-click="setTab(1)">SHOW Manual Admins</a>
</li>
<li ng-class="{ active: isSet(2) }">
<a href ng-click="setTab(2)">SHOW ONE Admins</a>
</li>
<li ng-class="{ active: isSet(3) }">
<a href ng-click="setTab(3)">SHOW TWO Read Admins</a>
</li>
<li ng-class="{ active: isSet(4) }">
<a href ng-click="setTab(4)">SHOW THREE Admins</a>
</li>
<li ng-class="{ active: isSet(5) }">
<a href ng-click="setTab(5)">SHOW FOUR Read Admins</a>
</li>
<li ng-class="{ active: isSet(6) }">
<a href ng-click="setTab(6)">SHOW FIVE Read Admins</a>
</li>
</ul>
</div>
<div class="col-md-8">
<div class="jumbotron">
<div ng-show="isSet(1)">
<h1>CONTENT1</h1>
</div>
<div ng-show="isSet(2)">
<h1>CONTENT2</h1>
</div>
<div ng-show="isSet(3)">
<h1>CONTENT3</h1>
</div>
<div ng-show="isSet(4)">
<h1>CONTENT4</h1>
</div>
<div ng-show="isSet(5)">
<h1>CONTENT5</h1>
</div>
<div ng-show="isSet(6)">
<h1>CONTENT6</h1>
</div>
</div>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js'></script>
<script src="app.js"></script>
</body>
</html>
Hey as mentioned in my comment you can use a service for your http calls
.service('HttpService', ['$rootScope', '$http', 'Ls', 'CommonService', 'DateService', function ($rootScope, $http, Ls, CommonService, DateService) {
return {
CallService: function (url, callback) {
$http.get(url)
.success(function (data, status) {
callback(data, status);
}).error(function (data, status) {
callback(data, status);
});
}
}
});
Which can be called from the controller (dont forget to inject HttpService)
.controller('TabController', ['$scope', 'HttpService', function($scope, HttpService) {
$scope.tab = 1;
$scope.setTab = function(newTab){
$scope.tab = newTab;
HttpService.CallService('http://localhost:8080/welcome.html?id='+newTab, function (data) {
$scope.tabdata = data;
});
};
$scope.isSet = function(tabNum){
return $scope.tab === tabNum;
};
the whole would look like this
angular.module('tabApp', [])
.controller('TabController', ['$scope', 'HttpService', function($scope, HttpService) {
$scope.tab = 1;
$scope.setTab = function(newTab){
$scope.tab = newTab;
HttpService.CallService('http://localhost:8080/welcome.html?id='+newTab, function (data) {
$scope.tabdata = data;
});
};
$scope.isSet = function(tabNum){
return $scope.tab === tabNum;
};
}])
.service('HttpService', ['$rootScope', '$http', function ($rootScope, $http) {
return {
CallService: function (url, callback) {
$http.get(url)
.success(function (data, status) {
callback(data, status);
}).error(function (data, status) {
callback(data, status);
});
}
}
});
Mh maybe the get call maybe console log status and response
I am new to AngularJS and I'm facing these issues :
I want to have a list of items (movies) and when I click on the image or on the title I want the path to be like #/movie/id. For that I tried using ngRoute and also tried path but I have faced errors in both, can you guide me which one is suitable for my case and how can I use it?
As you can see in the HTML code, I am trying to draw a search box but right now when the API runs and returns data the whole content of the ng-app is being replaced with the movie list, should I create a new scope for just the content I want to change, if so how and where?
Here is my code:
var movies = angular.module("movies", []);
movies.controller('movieController', function ($scope, $http) {
$http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json', {
params: {
limit : 16,
country : 'us',
apikey: 'rssd8z7pfw5t4nyd3cpszzzm',
callback: 'JSON_CALLBACK'
}
})
.success(function (data) {
$scope.movies = data.movies;
});
});
//added ngroute
var app = angular.module('movies', ['ngRoute']);
app.config(
function($routeProvider) {
$routeProvider.
when('/', {templateUrl:'/'}).
when('/movie/:id',
{
controller:UserView,
templateUrl: function(params){ return '/moviessssssss/' + params.id; }
}
).
otherwise({redirectTo:'/'});
}
);
app.controller('UserView', function($scope) {
$scope.movies = 'hereeeeeee!';
});
<html ng-app="movies">
<head>
<link rel="stylesheet" hrf="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
</head>
<body>
<div class="ng-scope">
Search : <input type="text" placeholder="filter for..." >
</div>
<div ng-view>
{{ message }}
<table ng-controller="movieController" class="ng-cloak">
<tr ng-repeat="movie in movies">
<td><a ng-href="#movie" ><img ng-src="{{ movie.posters.thumbnail}}"/></a></td>
<td><a ng-href="#movie" > {{ movie.title }} </a></td>
</tr>
</table>
</div>
For getting the links:
ng-href="{{'/#/movie/'+movie.id}}"
Then for getting the filter to work,
Put ng-model to your search box. And in your ng-repeat add | filter: ng-modelname
var movies = angular.module("movies", []);
movies.controller('movieController', function ($scope, $http) {
$http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json', {
params: {
limit : 16,
country : 'us',
apikey: 'rssd8z7pfw5t4nyd3cpszzzm',
callback: 'JSON_CALLBACK'
}
})
.success(function (data) {
$scope.movies = data.movies;
console.log($scope.movies);
});
});
<html ng-app="movies">
<head>
<link rel="stylesheet" hrf="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
</head>
<body>
<div class="ng-scope">
Search : <input type="text" placeholder="filter for..." ng-model="search">
</div>
<div ng-view>
{{ message }}
<table ng-controller="movieController" class="ng-cloak">
<tr ng-repeat="movie in movies | filter:search">
<td><a ng-href="{{'/#/movie/'+movie.id}}" ><img ng-src="{{ movie.posters.thumbnail}}"/></a></td>
<td><a ng-href="{{'/#/movie/'+movie.id}}" > {{ movie.title }} </a></td>
</tr>
</table>
</div>
TL;DR
Click Here to see a live plunker example.
in my example, i used bootstrap. remove if irrelevant
there is a TODO in my plunker - the server side movie filtering (when you type a something in the search field). you need to read more about it in developer.rottentomatoes.com
This is the routing configuration i would define:
movies.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/movies', {
templateUrl: 'movies.html',
controller: 'MoviesController',
resolve: {
movies: function($http) {
return $http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json', {
params: {
limit: 16,
country: 'us',
apikey: 'rssd8z7pfw5t4nyd3cpszzzm',
callback: 'JSON_CALLBACK'
}
});
}
}
})
.when('/movies/:id', {
templateUrl: 'movie.html',
controller: 'MovieController',
resolve: {
movie: function($http, $route) {
var id = $route.current.params.id;
return $http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/movies/' + id + '.json', {
params: {
limit: 1,
country: 'us',
apikey: 'rssd8z7pfw5t4nyd3cpszzzm',
callback: 'JSON_CALLBACK',
q: id
}
});
}
}
})
.otherwise({
redirectTo: '/movies'
});
});
/movies - a list of all movies
/movies/<movie id> - a specific details about the movie
NOTE - i used resolve to pre-fetch the json data (this is optional)
index.html
this is the main html code of your
<!DOCTYPE html>
<html ng-app="movies">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
movies.html
the view of the movie list.
we get the specific movie redirect by <a ng-href="#/movies/{{movie.id}}">
<input class="form-control" type="text" placeholder="Search ..." ng-model="search" >
<hr>
<table>
<tr ng-repeat="movie in movies | filter:search">
<td><a ng-href="#/movies/{{movie.id}}" ><img ng-src="{{ movie.posters.thumbnail}}"/></a></td>
<td><a ng-href="#/movies/{{movie.id}}"> {{ movie.title }} </a></td>
</tr>
</table>
movie.html
the view of the specific movie
<img class="img-responsive" ng-src="{{ movie.posters.detailed}}"/>
<h3>{{movie.title}} <small>{{movie.year}}</small></h3>
<p>{{movie.synopsis}}</p>
<hr>
<a class="btn btn-default" href="#/movies">Back</a>
<hr>
<pre>{{movie | json}}</pre>
MoviesController
the controller attached to the movies.html view
the $scope.$watch('search', is required to query the server for each input change you make. it's currently not working properly; rottentomatoes.com ignoring the q param. you need to read more about it in developer.rottentomatoes.com
movies.controller('MoviesController', function($scope, $http, movies) {
$scope.search = '';
$scope.$watch('search', function(newValue) {
// TODO: you need to request again the movie list from the server.
// Read more about the API here:
// http://developer.rottentomatoes.com/docs/read/json/v10/Movies_Search
$http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json', {
params: {
limit: 16,
country: 'us',
apikey: 'rssd8z7pfw5t4nyd3cpszzzm',
callback: 'JSON_CALLBACK',
q: newValue
},
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data) {
console.log(data);
$scope.movies = data.movies;
});
});
$scope.movies = movies.data.movies;
});
MovieController
the controller attached to the movie.html view
movies.controller('MovieController', function($scope, movie) {
$scope.movie = movie.data;
});
Live example - http://plnkr.co/edit/cJXTZWqBUXNTPinf7AoV?p=preview
For your first question do this:
<td><a ng-href="#/movie/{{movie.id}}"> {{movie.title}} </a></td>
i using the login via popup window in angular application. After popup i need to fill username and password , then i hit the sign in button , i ill get the json response , based on the response i have to show user account options menu using ng-show . for this case i m using following service and controller
my service code snippt
factory('services', ['$http', function ($http, logger) {
var ser = {};
ser.userLogin = function (data) {
return $http({
method: "post",
url: "login",
data: data,
async: true,
cache: false,
}).success(function (result) {
return result.data;
}
);
};
return ser;
}])
my controller code snippet
$scope.submitLogin = function () {
return services.userLogin($scope.login).then(function (data) {
var result = data.data;
if (result) {
console.log(result);
$scope.usercontrol = true;
console.log($scope.usercontrol);
ngDialog.close();
}
})
}
Template code
<ul ng-hide="usercontrol" class="nav navbar-nav navbar-right">
<li><a ng-click="signIn()"> <strong>Sign In</strong></a></li>
<li><a ng-click="signUp()"><strong>Sign Up</strong></a></li>
</ul>
<ul ng-show="usercontrol" class="nav navbar-nav navbar-right">
<li ng-class="{ active: isActive('/account')}"> <strong>My Account</strong></li>
<li><strong>Sign Out</strong></li>
</ul>
based on above code in my application working finely but not set $scope.usercontrol . any mistake i did?
demo plnkr.co/edit/EbfPjKWh6f4nwNcoqly1?p=preview
I have done some modification over the code.
Only thing is you might have not included the service in you controller function as a parameter.
html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>SO Question</h1>
<div ng-controller="LoginCtrl">
<ul ng-hide="usercontrol" class="nav navbar-nav navbar-right">
<li><a ng-click="signIn()"> <strong>Sign In</strong></a></li>
<li><a ng-click="signUp()"><strong>Sign Up</strong></a></li>
</ul>
<div ng-hide="usercontrol">
<input type="text" ng-modal="login.username" placeholder="username">
<input type="password" ng-modal = "login.password" placeholder="password">
<button ng-click="submitLogin()">Sign IN</button>
</div>
<ul ng-show="usercontrol" class="nav navbar-nav navbar-right">
<li ng-class="{ active: isActive('/account')}"> <strong>My Account</strong></li>
<li><strong>Sign Out</strong></li>
</ul>
</div>
</body>
</html>
script.js
var app = angular.module('app', []);
app.controller('LoginCtrl', ['$scope', '$http', '$timeout', 'LoginService', function($scope, $http, $timeout, LoginService){
$scope.usercontrol = false;
$scope.submitLogin = function() {
LoginService.userLogin($scope.login).then(function (data) {
var result = data;
if (result) {
console.log(result);
$scope.usercontrol = true;
console.log($scope.usercontrol);
}
});
};
}]);
app.factory('LoginService', ['$http', function($http){
var ser = {};
ser.userLogin = function (data) {
return $http({
method: "GET",
url: "login.json",
data: data,
async: true,
cache: false,
}).success(function (result) {
return result.data;
}
);
};
return ser;
}]);
I have made a plunkr on this http://plnkr.co/edit/ZShhiNTu7KLY1b0t8LQG?p=preview
UPDATE
You have missed to add scope: $scope to continue in the ngDialog, and please check on the CSS issues.
http://plnkr.co/edit/ZShhiNTu7KLY1b0t8LQG?p=preview
UPDATE
I have forked your code http://plnkr.co/edit/J6i6QY4sO3ZzoEvbnzJ3?p=preview and changed 2 things, scope: $scope and for CSS issues I have changed the template into plain and removed controller.
ngDialog.open({
template: 'signinDialog',
scope: $scope,
className: 'ngdialog-theme-plain'
});
I'm having trouble replacing the {{path}} within the template tag in the ng-include. If I put the tag inside the template anywhere else works perfectly, however I need to work within the include-ng to get the base path. Anyone have an idea.
Html with MVC
<div ng-controller='menuCtrl'>
<nav id="menu">
<ul>
<li ng-repeat="item in itens" ng-include="'#(ViewBag.path)Areas/System/scripts/templates/menu.html'" repeat-done></li>
</ul>
</nav>
</div>
App.js
var myApp = angular.module('mobsupplyApp', []).directive('repeatDone', function () {
return function (scope) {
if (scope.$last === true) {
setTimeout(function () {
$("#menu").jarvismenu();
});
}
};
});
myApp.controller('menuCtrl', ['$scope', '$http', function ($scope, $http) {
$http.get(path + "api/menu").success(function (data, status) {
$scope.itens = data;
$scope.path = path;
});
}]);
Template.html
<i class="fa fa-lg fa-fw {{ item.image }}"></i> <span class="menu-item-parent">{{ item.description }}</span>
<ul ng-if="item.itens">
<li ng-repeat="item in item.itens" ng-include="'{{ path }}Areas/System/scripts/templates/menu.html'"></li>
</ul>