i have uikit dropdown template in which i am trying add ng-reapet but drop down not working.
guys please help .....
<div class="uk-button-dropdown" uk-dropdown="{mode:'click'}">
<button class="md-btn">Click me <i class="material-icons"></i></button>
<div class="uk-dropdown">
<ul class="uk-nav uk-nav-dropdown">
<li ng-repeat="item in locationName">
{{item}}
</li>
</ul>
</div>
</div>
module
var addlocationModule = angular.module('addLocationApp', ['ngDialog']);
addlocationModule.controller('addLocationController', function ($scope, $http, $window, ngDialog) {
$scope.initialize = function(alllocation,loggedInEmployee)
{
$scope.alllocations = alllocation;
$scope.loggedInEmployee = loggedInEmployee;
$scope.locationName = [];
$scope.alllocations.forEach(function(resource) {
$scope.locationName.push(resource.title);
});
}
$scope.addLocations = function() {
$http.post('/addLocationName',$scope.location).then(function successCallback(response) {
if(response.data.status){
$scope.alllocations.push(response.data.location);
$scope.location.name="";
$scope.location.description="";
}
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
})
}
});
you should add ng-repeat in ul tag
<ul class="uk-nav uk-nav-dropdown" ng-repeat="item in locationName">
<li>
{{item}}
</li>
</ul>
i think it'll help you.
Related
I'm developing backend with Parse. I can get data from Parse but I can't show with ng-repeat with AngularJS.
app.controller('QuestionsController',['$scope', function ($scope) {
var query = new Parse.Query(_Categories);
query.find().done(function(data){
$scope.Categories = data;
console.log($scope.Categories);
});
$scope.Logout = function(){
Parse.User.logOut();
window.location.href = '#';
}}]);
I'm using ngRoute and this HTML codes
<div class="menu">
<div class="container">
<div class="bars"><i class="fa fa-bars"></i></div>
<ul>
<li ng-repeat="Category in Categories">{{Category.Name}}</li>
</ul>
</div>
</div>
I can see data on Console but I can't show on page.
I solved this problem. Controller codes is
var query = new Parse.Query(_Categories);
query.find({
success: function(data){
$scope.Categories = data;
$scope.$apply();
}
});
And i wrote this code on HTMl
<div class="bars"><i class="fa fa-bars"></i></div>
<ul>
<li ng-repeat="cat in Categories">
<a href="#" >{{cat.get('Name')}}</a>
</li>
</ul>
</div>
Let's say we have 10 lights (we use li tag) . I want to show them one by one like this :
<h3>Light</h3>
<div ng-app ng-controller="MyCtrl">
<ul>
<li class="dot">
</li>
<li class="dot">
</li>
<li class="dot">
</li>
<li class="dot">
</li>
<li class="dot">
</li>
<li class="dot">
</li>
<li class="dot">
</li>
</ul>
</div>
First light = on
rest of theme = off .
after that
second light = on
First and other lights = off
How can i achieve this ?
Fiddle : http://jsfiddle.net/RkykR/1237/
This first example toggles through the elements manually on each click of the button.
Live demo (click here).
<div ng-app="myApp" ng-controller="MyCtrl">
<button ng-click="switch()">Switch</button>
<ul>
<li class="item" ng-class="{on: $index === selectedIdx}" class="item" ng-repeat="item in items track by $index"></li>
</ul>
</div>
.item {
background:red;
width:5px;
height:5px;
list-style:none;
margin-bottom:5px;
visibility: hidden;
}
.on {
visibility: visible;
}
angular.module('myApp', [])
.controller('MyCtrl', function($scope) {
// make array with 10 items
$scope.items = new Array(10);
$scope.selectedIdx = 0;
$scope.switch = function() {
++$scope.selectedIdx;
if ($scope.selectedIdx === $scope.items.length) {
$scope.selectedIdx = 0;
}
};
})
;
Here is another version where the lights move automatically and can be stopped and started again with the button Live demo (click here):
<div ng-app="myApp" ng-controller="MyCtrl">
<button ng-click="switch()">{{timer ? 'Stop' : 'Start'}}</button>
<ul>
<li class="item" ng-class="{on: $index === selectedIdx}" class="item" ng-repeat="item in items track by $index"></li>
</ul>
</div>
angular.module('myApp', [])
.controller('MyCtrl', function($scope, $interval) {
// make array with 10 items
$scope.items = new Array(10);
$scope.selectedIdx = null;
$scope.timer = null;
$scope.switch = function() {
$scope.timer ? stop() : start();
};
function stop() {
$interval.cancel($scope.timer);
$scope.timer = null;
}
function start() {
$scope.timer = $interval(function() {
$scope.selectedIdx = $scope.selectedIdx === null ? 0 : $scope.selectedIdx+1;
if ($scope.selectedIdx === $scope.items.length) {
$scope.selectedIdx = 0;
}
}, 500);
}
start();
})
;
You can use $timeout for lighting dots with a delay. So as you will see I use a recursive function to do...
CONTROLLER
function MyCtrl($scope, $timeout) {
$scope.lights = [0,1,2,3,4,5,6];
$scope.currentLight = 0;
function light(index){
if($scope.lights.length < index) {
light(0);
} else {
$scope.currentLight = index;
$timeout(function(){
light(++index);
}, 1000);
}
}
light(0);
}
HTML
<h3>Light</h3>
<div ng-app ng-controller="MyCtrl">
<ul ng-repeat="light in lights">
<li class="dot" ng-class="{'red': $index == currentLight}">
</li>
</ul>
</div>
Actually, this must be a small development exercise, that you are assigned to do in your class. So, I would normally not answer these kind of questions. However, since I am in a merry mood, I just updated your JSFiddle.
But do try your best to figure this out on your own. There are 1000 ways you can implement this. But below is a simple answer.
function MyCtrl($scope) {
$scope.activeLight = 3;
$scope.data = [1,2,3,4,5,6,7];
$scope.update = function(index) {
$scope.activeLight = index;
};
Click here for the updated fiddle << Please, try yourself before you just click this :) Just a friendly advice. Also, try a bit and add timer to run this automatically.
I've an issue with Angular JS. I don't get why my data in the scope can't be displayed with the {{ }} but can be display if I use the directive : data-ng-bind.
If anyone has an idea :
Here's my HTML Code :
<aside id="sidebar-left" class="sidebar-left" data-ng-controller="PortalController" data-ng-init="getAppslist()">
<div class="sidebar-header">
<div class="sidebar-title">
Navigation
</div>
<div class="sidebar-toggle hidden-xs" data-toggle-class="sidebar-left-collapsed" data-target="html" data-fire-event="sidebar-left-toggle">
<i class="fa fa-bars" aria-label="Toggle sidebar"></i>
</div>
</div>
<div class="nano" >
<div class="nano-content">
<nav id="menu" class="nav-main" role="navigation">
<ul class="nav nav-main">
<li class="nav-active">
<a href="#!/">
<i class="fa fa-home" aria-hidden="true"></i>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="#!/users">
<i class="fa fa-users" aria-hidden="true"></i>
<span>Users</span>
</a>
</li>
<li class="nav-parent">
<a href="#!/apps">
<i class="fa fa-cubes" aria-hidden="true"></i>
<span>Apps</span>
</a>
<ul class="nav nav-children">
<li ng-repeat="app in appslist">
<a ng-href="#!/apps/{{app.CloudAppInstanceId}}">{{app.Name}}</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</aside>
Here's my controller :
angular.module('core').controller('PortalController', ['$scope', 'Portal',
function($scope, Portal) {
$scope.getAppslist = function() {
Portal.getApps(function(callback) {
$scope.appslist = callback;
$scope.blabla = 'blabla';
});
};
}]);
And here's my service :
angular.module('core').factory('Portal', function($http, $cookies, $rootScope) {
// define factory object
var factory = {};
var getApps = function(callback){
$http.get($rootScope.logrrApiAddress + '/apps', config).success(function(data, status, headers, config) {
callback(data);
});
}
factory.getApps = function(callback){
return getApps(callback);
}});
Thanks in advance for your response
Martin Taz
You don't need handlebars in an ng-href. Try:
<a ng href="'#!/apps/' + app.CloudAppInstanceId">{{app.Name}}</a>
Better yet would be to turn that into a method on your controller.
<a ng href="'#!/apps/' + app.CloudAppInstanceId">{{app.Name}}</a>
Seems to me that app is not defined in the scope, what you do set in PortalController, though, is $scope.appslist.
Also, the Portal factory function must return an object instance (it currently doesn't return anything). AND the factory's method must actually return a promise, too.
angular.module('core').factory('Portal', [
'$http', '$cookies', '$rootScope',
function($http, $cookies, $rootScope) {
var factory = {}; // define factory object
factory.getApps = function(){
// FIXME: what is "config", where is it supposed to come from?
return $http.get($rootScope.logrrApiAddress + '/apps', config);
};
return factory; // <-- you need to return something
}
]);
angular.module('core').controller('PortalController', [
'$scope', 'Portal',
function($scope, Portal) {
$scope.getAppslist = function() {
Portal.getApps().then(function (data) {
$scope.apps = data;
$scope.blabla = 'blabla';
});
};
}
]);
I changed things a bit, esp. got rid of the callback parameter - you don't need that, simply get the promise that getApps() returns and use the data once the promise is resolved.
Using AngularJS v1.3.15
I am getting a weird syntax error:
http://errors.angularjs.org/1.3.15/ngRepeat/iexp?p0=item%20asNaNtems
This is my template (templateUrl):
<div class="context-menu" ng-if="showMenu">
<div class="context-menu-item" ng-repeat="item as items" ng-class="{disabled: item.isDisabled()}">
<a href="" ng-click="fire(item)">
<i class="fa" ng-class="item.getIcon()"></i> {{item.getName()}}
</a>
</div>
</div>
The directive starts with a $scope.items = [] in the controller function of that directive:
angular.module('app').directive('atContextMenu', [
function() {
return {
'templateUrl': '...',
'controller': function($scope, $element) {
$scope.items = [];
}
};
}
]);
As the link says (if you have clicked on the link) you got the syntax wrong. It should be item in collection:
ng-repeat="item in items"
I am trying to run some javascript after the data from JSON has successfully loaded so I can then manipulate my dom elements, but having trouble accomplishing this as when I run my javascript, the elements are not loaded yet.
app.controller('portfolioController', function($scope, $route, $http) {
$scope.contents = null;
$http.get("js/json/portfolio.json").success(function(data) {
$scope.contents = data;
alert('alert this after all elements are loaded on dom');
});
});
<ul class="projects basic" >
<li ng-repeat="content in contents">
<img src="img/projects/{{ content.image }} " >
<a class="hover" ></a>
</li>
</ul>
So I ended up using the ng-click directive on my dom, then called in the click function, which worked great. Here is updated code:
app.controller('portfolioController', function($scope, $route, $http) {
$scope.classes = 'basic about';
$scope.contents = null;
$http.get("js/json/portfolio.json").success(function(data) {
$scope.contents = data;
});
$scope.showDetails = function() {
alert('do stuff after everything is loaded');
}
});
<ul class="projects basic" >
<li ng-repeat="content in contents">
<img ng-src="img/projects/{{ content.image }} " >
<a ng-click="showDetails()" class="hover" ></a>
</li>
</ul>