I am following tutorial for Angular JS on their website.
Instead of the dropdown for selecting the order[Alphabetically or Newest], I made two buttons for it and defined ng-click on them.
Here is my code:
HTML Partial CODE:
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>Sort by: </li>
<li class="active">Newest</li>
<li>Alphabetical</li>
</ul>
<ul class="left">
<li class="divider"></li>
<li class="has-form">
<input type="text" ng-model="query" placeholder="Find Stuff"> </li>
</ul>
</section>
</nav>
<div class="row">
<ul class="phones">
<li ng-repeat="phone in phones | filter: query | orderBy: orderProp" class="thumbnail">
<img src="" alt="" ng-src="{{phone.imageUrl}}">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
AND MY CONTROLLER:
phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone', function($scope, Phone) {
$scope.phones= Phone.query();
$scope.orderProp= 'age';
$scope.setOrder= function(order) {
$scope.orderProp= order.toString();
}
}]);
Routers:
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-details.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
Setorder function is being called when I am clicking on Link, however I cannot see changes in Order listing.
What I am doing wrong here?
there is some typo in your jsfiddle example...
first you should put filter statement into ng-repeat expression...
<li ng-repeat="todo in todos | orderBy: order">
second, you order by name but your object has no field with the name so change your object text field to name or reverse...
$scope.todos = [
{name:'learn angular', done:true, age: 0},
{name:'build an angular app', done:false, age: 1}];
here is fixed JSFIDDLE...
Related
I am building an app using the MEAN stack, and in my index.ejs files I have
<div ui-view style="height: 100%"></div>.
My angularApp.js file has the following states declared:
var app = angular.module('foundry-io', ['ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'javascripts/views/main.html',
controller: 'MainController'
})
.state('print', {
url: '/print',
templateURL: 'javascripts/views/print.html',
controller: 'MainController'
});
$urlRouterProvider.otherwise('/');
}]);
I also have a navbar as follows:
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
<a class="page-scroll" ui-sref="print">Services</a>
</li>
<li>
<a class="page-scroll" href="#technology">Technology</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
The home state renders as expected, but when clicking the "Services" nav button the view that's rendered is a blank, black screen. How do I make additional views render beyond the "home" view?
Thank you.
The ng repeat is not working for my angular code.
Here is the partial:
<section class="artistpage">
<ul class="artistlist">
<li ng-model = "questions" ng-repeat="item in questions">
<input type="checkbox" name = "q">{{item.ct}}
</input>
</li>
</ul>
</section>
Here is the Controller:
var testControllers = angular.module('testControllers', []);
testControllers.controller('ListController', ['$scope', '$http', function($scope, $http) {
$http.get('js/cat.json').success(function(data) {
$scope.questions = data;
});
}]);
The data:
[
{
"info":{
"cid":1,
"ct":"T1",
"ctg":"math",
"pcid":78
}
},
{
"info":{
"cid":2,
"ct":"T2",
"ctg":"math",
"pcid":78
}
},
{
"info":{
"cid":3,
"ct":"T3",
"ctg":"Py",
"pcid":2
}
}
]
I have not been able to figure out why this is not working. Help please!
The problem here is you are not accessing the object info, you should access each element info and get the value
change your ng-repeat like this,
<li ng-model = "question" ng-repeat="item in questions">
{{item.info.ct}}
</li>
Working Plunker
You just need to replace {{item.ct}} with {{item.info.ct}} as you have object info inside your outer object. Check FIDDLE
<section class="artistpage">
<ul class="artistlist">
<li ng-model = "questions" ng-repeat="item in questions">
<input type="checkbox" name = "q"/>{{item.info.ct}}
</li>
</ul>
</section>
<section class="artistpage">
<ul class="artistlist">
<li ng-model = "question" ng-repeat="item in questions">
<input type="checkbox" name = "q">{{item.ct}}
</input>
</li>
</ul>
</section>
--------------use this-----------
<section class="artistpage">
<ul class="artistlist">
<li ng-model = "question" ng-repeat="item in questions">
<input type="checkbox" name = "q">{{item.info.ct}}
</input>
</li>
</ul>
</section>
ng-model should not be the same. so use ng-model="question" instead of questions
Here is plunker
I have one problem.I have a login page.When user will logged in the home page is coming.In that home page i have some options which called its respective partial view page.Let me to explain my code first.
user.html:
<nav class="navbar navbar-default navbar-fixed-top"
style="margin-top:50px;z-index:111!important;">
<div class="container" style="width:1270px;">
div class="navbar-header navbar-brand">
{{deptName}}
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="user">Home</a></li>
<li ui-sref-active="active"><a ui-sref=".plan">Plan</a></li>
<li ui-sref-active="active"><a ui-sref="#">Subject</a></li>
<!-- <li ui-sref-active="active"><a ui-sref=".hod">HOD</a></li> -->
<li ui-sref-active="active"><a ui-sref="#">User Management</a></li>
<li ui-sref-active="active"><a ui-sref="#">User Role</a></li>
<li ui-sref-active="active"><a ui-sref="#">Time Table</a></li>
<li ui-sref-active="active"><a ui-sref="#">Faculty</a></li>
<li ui-sref-active="active"><a ui-sref="#">WDS</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!--main_heading_div-->
<!--middle_content_details_data-->
<div class="row" style="padding-top:120px;" ui-view>
</div>
After login the above page is coming. Check my below routing path:
.state('user',{
url: '/user',
templateUrl: 'userview/user.html',
controller: 'userController'
})
.state('user.plan',{
url: '/plan',
templateUrl: 'userview/plan.html',
controller: 'planController'
})
.state('user.profile',{
url: '/profile',
templateUrl: 'userview/profile.html',
controller: 'userProfileController'
})
Here I need when user will logged in the plan.html will set up by default inside the ui-view of user.html.
Well, it seems like a "default redirection issue". And there are solutions, this one I do like the most:
Redirect a state to default substate with UI-Router in AngularJS
where we can mark any state with its default redirection target:
.state('user',{
url: '/user',
templateUrl: 'userview/user.html',
controller: 'userController',
// here is new marker
redirectTo: 'user.plan'
})
And with this small code snippet it will start to do the magic:
app.run(['$rootScope', '$state', function($rootScope, $state) {
$rootScope.$on('$stateChangeStart', function(evt, to, params) {
if (to.redirectTo) {
evt.preventDefault();
$state.go(to.redirectTo, params)
}
});
}]);
There is even working example
I want to add breadcrums in my application , How i can achieve this task using AngularJS. So far i have implemented router and header file and not sure after this how to use breadcrums in AngularJS.
So far tried below code...
INDEX
<div class="container mainIndexContainer">
<div id="wrap">
<div ng-include src="'views/header.html'"></div>
<div class="container mainIndexContainer">
<div ui-view=""></div>
</div>
<div ng-include src="'views/footer.html'"></div>
</div>
HTML
<div class="row">
<div class="container-fluid banner">
<div class="red title pull-left">Risk Assessment Platform</div>
<div class="blue pull-right"></div>
</div>
</div>
<div class="row">
<nav ng-show="user.isAuthenticated" class="navbar navbar-default risknavheader" role="navigation">
<ul kendo-menu
k-orientation="horizontal" k-rebind="'horizontal'">
<li><a ui-sref="home" ng-click="showConfirmationOnChange('/')">Dashboard</a></li>
<li><a href="">Process Risk & Control
Inventory</a>
<ul class="submenu">
<li ng-show="PROCESS_ADD"><a ui-sref="createProcess" ng-click="showConfirmationOnChange('/process/create')">Create
New Process</a></li>
<li ng-show="RISK_ADD"><a ui-sref="createRisk" ng-click="showConfirmationOnChange('/risk/create')">Create New Unaligned
Risk</a></li>
<li ng-show="CONTROL_ADD"><a ui-sref="createControl" ng-click="showConfirmationOnChange('/createNewControl/_new')">Create
New Unaligned Control</a></li>
<li ng-show="PROCESS_VIEW || RISK_VIEW || CONTROL_VIEW"><a ui-sref="search" ng-click="showConfirmationOnChange('/viewSearchInv')">View/
Search Inventory</a></li>
<li disabled>View End-to-End</li>
<li disabled>Reports</li >
</ul></li>
<li><a class="no-style" href="#">Data Upload </a>
<ul class="submenu">
<!-- This below link will be useful for future development -->
<!-- li Upload Inventory</li -->
<li disabled>Upload Inventory</li>
</ul></li>
<li><a ui-sref="home">Risk Assessment</a>
<ul class="submenu">
<li disabled>RCSA</li>
<li disabled>CRA</li>
<li disabled>Reports</li>
</ul></li>
<li><a ui-sref="home">Administration </a>
</li>
<li style="margin-right: 0px;" class="nav navbar-nav navbar-right" ng-show="user.isAuthenticated"><a>{{user.customUserDetails.workFullName}}</a>
<ul class="submenu">
<li><a ui-sref="logout">Logout</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
ROUTER.JS
angular.module('riskAssessmentApp')
.config(function($stateProvider, $httpProvider, $urlRouterProvider) {
/*
* This has to be here because the browsers will not catch the home
* state without it
*/
$urlRouterProvider.otherwise( function($injector, $location) {
var $state = $injector.get("$state");
$state.go("home");
});
$httpProvider.defaults.withCredentials = true;
$httpProvider.defaults.headers.post = {'Content-Type': 'application/json'};
$httpProvider.interceptors.push('HttpResponseInterceptor');
$stateProvider
.state('home', {
url : '/',
templateUrl: 'views/riskAssesmentHomePage.html',
controller: 'riskHomePageController',
data: {
authenticate: true
}
}).state('smlogin', {
url: '/smlogin',
controller: 'SMLoginController'
})
.state('login', {
url : '/login',
templateUrl : 'views/login.html',
controller : 'LoginController'
})
.state('error', {
url:'/error',
templateUrl: 'views/error.html'
})
.state('settings', {
url:'/settings',
templateUrl: 'views/settings.html',
controller: 'SettingsController'
})
.state('sessions', {
url:'/sessions',
templateUrl: 'views/sessions.html',
controller: 'SessionsController',
resolve:{
resolvedSessions:['Sessions', function (Sessions) {
return Sessions.get();
}]
}
})
.state('metrics', {
url:'/metrics',
templateUrl: 'views/metrics.html',
controller: 'MetricsController'
})
.state('logs', {
url:'/logs',
templateUrl: 'views/logs.html',
controller: 'LogsController',
resolve:{
resolvedLogs:['LogsService', function (LogsService) {
return LogsService.findAll();
}]
}
})
.state('createProcess', {
url:'/process/create',
templateUrl : 'views/createEditProcessContent.html',
controller : 'ProcessController',
data: {
authenticate: true
}
})
.state('editProcess', {
url:'/process/:process_Id/:refresh',
templateUrl : 'views/createEditProcessContent.html',
controller : 'ProcessController',
data: {
authenticate: true
}
})
.state('createRisk', {
url:'/risk/create',
templateUrl: 'views/createNewRisk.html',
controller: 'RiskController',
data: {
authenticate: true
}
})
You can use https://github.com/ncuillery/angular-breadcrumb
Define a ncyBreadcrumb.label property to each states
And then use the directive
<div ncy-breadcrumb></div>
I have the same situation as the following two posts:
Angular ui-router, scroll to next step on state change
and
Angular ui-router change state on scroll
TL;DR
I have multiple sections on one page where I want the user to scroll to when clicking on a link.
I get the scroll to function to work but it seems to scroll to random positions, except on the first click.
I also use templatecache (html2js) for my views.
I have the following routing:
$urlRouterProvider.otherwise("/");
var views = {
"viewAbout": {templateUrl: "app/views/about/about.tpl.html"},
"viewMeetups": {templateUrl: "app/views/meetup/meetup.tpl.html"},
"viewNextMeetup": {templateUrl: "app/views/meetup/next-meetup.tpl.html"},
"viewSponsors": {templateUrl: "app/views/sponsors/sponsors.tpl.html"},
"viewContactUs": {templateUrl: "app/views/contact-us/contact-us.tpl.html"},
"viewFooter": {templateUrl: "app/views/footer/footer.tpl.html"}
};
$stateProvider
.state('home', {
url: "/",
views: views
})
.state('about', {
url: "/about",
views: views,
onEnter: function () {
$('#scrollme').animate({
scrollTop: $("#about").offset().top
}, 2000);
}
})
.state('meetups', {
url: "/meetups",
views: views,
onEnter: function () {
$('#scrollme').animate({
scrollTop: $("#meetups").offset().top
}, 2000);
}
})
And the following menu:
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="page-scroll">
<a ui-sref="about">About</a>
</li>
<li class="page-scroll">
<a ui-sref="meetups">Meetups</a>
</li>
<li class="page-scroll">
<a ui-sref="sponsors">Sponsors</a>
</li>
<li class="page-scroll">
<a ui-sref="contact">Contact us</a>
</li>
</ul>
<div ui-view="viewNextMeetup"></div>
<div ui-view="viewAbout"></div>
<div ui-view="viewMeetups"></div>
<div ui-view="viewSponsors"></div>
<div ui-view="viewContactUs"></div>
<div ui-view="viewFooter"></div>
Anyone could help me out with this ?