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>
Related
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.
Obective : to display a default image on an anchor tag if no image is available
onerror is working on ng-src but not
not working
<li class=""><a href="http://imagepath/correct.jpg" id="hrefID" onerror="this.src='http://imagepath/default.jpg' "title="default image"</a>
This is working however not clickable
<img alt="1" ng- src="http://imagepath/correct.jpg" onerror="this.src='http://imagepath/default.jpg '"title="default image" />
Angular directive ngSrc doesn't have any native features for processing of 404 response.
So you can try like this:
<div ng-controller="MyCtrl">
<div ng-repeat="image in images">
<img ng-src="{{image}}" on-error="http://google.com/favicon.ico"/>
</div>
</div>
<script>
var myApp = angular.module('myApp',[]);
myApp.directive('onError', function() {
return {
link: function(scope, element, attrs) {
element.bind('error', function() {
if (attrs.src != attrs.onError) {
attrs.$set('src', attrs.onError);
}
});
}
}
});
myApp.controller("MyCtrl", function($scope) {
$scope.images = [
'http://www.titanui.com/wp-content/uploads/2013/11/30/Flat-AngularJS-Logo-PSD.png',
'any.png' //WRONG URL
];
});
</script>
Fiddle
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>
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"