The aboutus.html page is displayed correctly, except the content in the ng-repeat within media-list in aboutus.html. there are no errors displayed in the console. I have not included the entire code (since it takes more space.). Can anyone help me?
// factory here.
angular.module('vasuapp')
.factory('corporateFactory', function() {
// Implement two functions, one named getLeaders,
// the other named getLeader(index)
// Remember this is a factory not a service
var corpfac = {};
var leadership = [
{
id: 0,
name:"asdfd",
designation:"sgsdgg",
abbr: "fgdfvf",
},
{
// similarly some other data here.
} ];
corpfac.getLeader = function(){
return leadership;
};
corpfac.getLeaders = function(index)
{
return leadership[index];
};
return corpfac;
});
// app.js
angular.module('vasuapp', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/aboutus', {templateUrl:'./aboutus.html' , controller: 'AboutController'})
.otherwise('/');
})
// controller.js
angular.module('vasuapp')
.controller ('AboutController',['$scope','corporateFactory', function($scope,corporateFactory){
var leadership = corporateFactory.getLeader();
$scope.leaders = this.leadership;
}])
// aboutus.html
<div class="row row-content">
<div class="col-xs-12 col-sm-9">
<h2>Corporate Leadership</h2>
<p> hi </p>
<ul class="media-list">
<li class = "media" ng-repeat = "lead in leaders">
<div class = "media-list tab-pane fade in active">
<a ng-href="#/aboutus">
<img class = "media-object" ng-src={{lead.image}} alt="author image">
</a>
</div>
<div class = "media-body">
<p>{{lead.description}}</p>
</div>
<footer>
-- {{lead.name}} the {{lead.designation}}
</footer>
</li>
</ul>
</div>
I think what you want is:
$scope.leaders = corporateFactory.getLeader();
this.leadership is not defined.
Related
For the purposes of navigation, I'm trying to have a button that triggers a function.
This function must first:
-Redirect to #/
And then:
-Filter an ng-repeat that exists in this view.
This is what I've tried but no luck.
<li><a ng-click="shopsingle()">Shop</a></li>
And JS:
$scope.shopsingle = function(){
$location.path("/");
setTimeout(function () {
$scope.$apply(function(){
$scope.filterExpr = {"shop" : true};
console.log($scope.filterExpr);
});
}, 300);
};
It does redirect to the desired path, where a full ng-repeat list appears, but it won't apply the filter, and console also comes empty.
About the views and routing, I'm using the same template for 2 different views, and showing/hidding parts of if while watching the $routeParams:
.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "home.htm",
controller : "mainCtrl"
})
.when('/:name',
{
templateUrl:"home.htm",
controller:"mainCtrl"
})
.otherwise({redirectTo:'/'});
})
And the controller watch:
$scope.name = $routeParams.name;
$scope.$watch(function() { return $scope.name; }, function(newVal) {
if (!newVal){
$scope.single = false;
} else{
$scope.single = true
};
$scope.newname = newVal;
$scope.chosenexhibitor = $filter("filter")($scope.images, {'name':$scope.newname}, true);
}, true);
And the view:
<!-- MAIN PAGE -->
<div ng-hide="single" id="tiles" masonry='{ "transitionDuration" : "0.15s" , "itemSelector" : ".tile"}'>
<div masonry-tile ng-repeat="item in images | filter:filterExpr" class="tile col-xs-3 col-md-3">
<a href="#/{{item.name}}">
<img class="img-fluid" ng-src="img/{{item.link}}">
</a>
</div>
</div>
<!-- SINGLE PAGE -->
<div class="row flexing" ng-show="single">
<div class="col-md-12">
<h1>{{chosenexhibitor[0].name}}</h1>
<img ng-src="img/{{chosenexhibitor[0].link}}">
<a class="back" href="#/">Back</a>
</div>
</div>
What am I missing?
Left hand side of the page is displaying list of task force.
On click of the list item related data is to be displayed on right hand side.
When I click on the list item, first time it works fine. It displays the task force name as a header in right hand side panel. When I click on another list item it gives TypeError: v2.CurrentTaskForce is not a function
var VirtualDir = GetVirtualDirectory();
angular.module('MyApp',[])
.controller('TaskForceController', function ($scope, TaskForceService) { // inject taskforce service
$scope.TaskForceList = null;
//$scope.CurrentTaskForce = {}
TaskForceService.GetTaskForceList().then(function (d) {
$scope.TaskForceList = d.data;
}, function () {
alert('failed');
});
$scope.CurrentTaskForce = function (item) {
angular.forEach($scope.TaskForceList, function (value, index) {
value.IsActive = false ;
})
item.IsActive = true;
alert("s");
$scope.CurrentTaskForce = item;
}
})
.factory('TaskForceService', function ($http) { //here factory is created which is a populer way to create and configure services
var fac = {};
fac.GetTaskForceList = function () {
return $http.get(VirtualDir + '/TaskForce/GetMyTaskForce/');
}
return fac;
});
<div class="container-fluid" ng-controller="TaskForceController as tf">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar" >
<%-- <li class="active">Overview <span class="sr-only">(current)</span></li>--%>
<li ng-repeat="item in TaskForceList" ng-class="{active: item.IsActive == true}" ng-click="CurrentTaskForce(item)" ><a href="#" >{{item.TaskForce}}</a></li>
</ul>
</div>
<div class="col-sm-9 co-md-9" style="left:20%">
<div class="panel panel-default" ">
<div class="panel-heading">
<p class="panel-title">{{CurrentTaskForce.TaskForce}}</p>
<!--ng-repeat="curritem in CurrentTaskForce"-->
</div>
</div>
</div>
</div>
</div>
While copying item to CurrentTask force instead of
$scope.CurrentTaskForce = item;
I used
angular.copy(item, $scope.CurrentTaskForce);
It is happening because CurrentTaskForce is defined as a function and a variable in same controller. Please use a different name for either.
Alright, I have an html page that contains an ionic card but when I bind data to its items they are not shown at the browser so what is the problem
<ion-view title="Game" ng-controller="GameCtrl as vm">
<ion-content class="has-header">
<div class="card">
<div class="item">
Home Team
</div>
<div class="item">
{{vm.game.team1}}
</div>
<div class="item">
Score: {{vm.game.team1Score}}
</div>
</div>
<div class="card">
</div>
<div class="card">
</div>
</ion-content>
</ion-view>
and here is the angular controller for this page :
(function () {
'use strict';
angular.module('eliteApp').controller('GameCtrl', ['$stateParams','eliteApi', GameCtrl]);
function GameCtrl($stateParams, eliteApi) {
var vm = this;
var gameId = Number($stateParams.id);
var data = eliteApi.getLeagueData();
vm.game = _.find(data.games,{"id": gameId});
};
})();
I injected the js file to index.html; while tracing the debugging the function is getting data but data is not viewed at the browser so can anybody have some help ?
Try this:
'use strict';
angular.module('eliteApp').controller('GameCtrl', ['$stateParams','eliteApi', function($stateParams, eliteApi){
var gameId = Number($stateParams.id);
var data = eliteApi.getLeagueData();
this.game = _.find(data.games,{"id": gameId});
}]);
Edit
Looks like you're missing a route with a game id. Add this to your .config function:
.state('app.game-detail', {
url: "/game/:id",
views: {
"mainContent":{
templateUrl: "app/game/game.html"
}
}
})
And change your team-detail.html with this:
<a class="item item-icon-right" ng-repeat="game in vm.games"
href="#/app/game/{{game.gameId}}">
It should work now.
I am new to angularJS. I am currently building a small mobile store where I display the data of all the products in the front page and on clicking the product, i wanted to show the description of the product in the next page.
When I click on the product, I was able to redirect to the next page but not the contents of the page.
My index.html
<div class="container">
<header>
<h1>My Mobile Store</h1>
</header>
<hr class="header-seperator">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">My Mobile Store</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Mobiles</li>
<li>Electronics</li>
<li>Fashions</li>
<li>Footwears</li>
</ul>
</div>
</div>
</nav>
<div ng-view></div>
</div>
My app.js
(function() {
var storeConfig = function($routeProvider) {
$routeProvider
.when('/', {
controller: 'StoreController',
templateUrl: 'views/products-list.html',
controllerAs: 'StreCtrl'
})
.when('/product', {
controller: 'StoreController',
templateUrl: 'views/product.html',
controllerAs: 'prodCtrl'
});
};
var app= angular.module('mystore',['ngRoute']).config(storeConfig);
app.service('sharedProperties', function () {
var product = [];
return {
getProduct: function () {
console.log(product);
return product;
},
setProduct: function(value) {
product = value;
//console.log(product);
}
};
});
app.controller('StoreController',[ '$http', 'sharedProperties', function($http,sharedProperties) {
var store = this;
store.products = [];
store.error = "false";
store.item = [];
$http.get('data/products.json').success(function(data) {
store.products = data;
}).error(function() {
store.error = "true";
});
store.showProduct = function(product) {
sharedProperties.setProduct(product);
};
store.item = sharedProperties.getProduct;
console.log("Store Item");
console.log(store.item);
}]);
})();
I couldn't get the data in store.item. What is the mistake I am doing. Any help will be grateful.
Thanks in Advance!!
You are assigning a method reference to your scope object, Instead of you need to call method.
Change From
store.item = sharedProperties.getProduct;
TO
store.item = sharedProperties.getProduct();
I want to store the users vote's inside a cookie, the problem is that inside the ng-repeat I have a value called session.upVoteCount. But it is supposed to be a separate value for each event list item. Is it possible to store each upVoteCount separately and then retrieve them separately again?
<li ng-repeat="session in event.sessions | filter:query | orderBy:sortorder" class="span11">
<div class="row session">
<div class="col-sm-1 well votingWidget">
<div class="votingButton" ng-click="upVoteSession(session)">
<span class="glyphicon glyphicon-arrow-up"></span>
</div>
<div class="badge badge-inverse">
<div>{{session.upVoteCount}}</div>
</div>
<div class="votingButton" ng-click="downVoteSession(session)">
<span class="glyphicon glyphicon-arrow-down"></span>
</div>
</div>
</div>
</li>
and in my controller I have this:
$scope.upVoteSession = function(session) {
session.upVoteCount++;
};
$scope.downVoteSession = function(session) {
session.upVoteCount--;
};
First, I don't recommend to use term 'session', but 'votes'. However, it's your call.
I simplify your problem in this example
http://plnkr.co/edit/l7tQRbuOtEDJetY5eTsf?p=preview
Javascript:
function MyCtrl($scope) {
$scope.votes = {};
$scope.vote = function(key, val) {
$scope.votes[key] = $scope.votes[key] || 0;
$scope.votes[key]+= val;
};
}
Html:
<li ng-repeat="no in [1,2,3,4,5]">
{{no}} : {{votes[no]}} <br/>
upvote
downvote
</li>
Hi guys I solved it myself, I could not get it to work with JSfiddle so I have uploaded the entire thing. Click on server.bat and browser to localhost:8000/eventdetails.html and you will see it working.
https://mega.co.nz/#!1d9yiYiA!zTzdztLAmhVDVYOvvVLINETI2bo_WjxCBteWYm2VUKc
controller:
eventsApp.controller('EventController',
function EventController($scope, $cookieStore, eventData) {
$scope.sortorder = 'name';
var ape = eventData.getEvent();
ape.then(function (banana) {
$scope.event = banana;
angular.forEach(banana.sessions, function (value, key) {
var storecookie = ($cookieStore.get(value.name));
if (typeof storecookie !== "undefined") {
value.upVoteCount = storecookie;
}
});
});
$scope.upVoteSession = function (session) {
session.upVoteCount++;
$cookieStore.put(session.name, session.upVoteCount);
};
$scope.downVoteSession = function (session) {
session.upVoteCount--;
$cookieStore.put(session.name, session.upVoteCount);
};
}
);