angularjs - How to use md-nav-bar correctly? -
i'm using angular material md-nav-bar , have problems.
1) want add middle of page.
2) want know how add pages nav-items
i have attached image show how looks
is there possible way it?
any highly appreciate. thanks,
here go - codepen
- to centre
md-nav-bar
use layout - to add
md-nav-item
useng-repeat
array , add array
markup
<div ng-controller="appctrl" ng-app="myapp" layout-fill layout="column" ng-cloak> <div layout="row" layout-align="center" flex="70"> <md-content class="md-padding"> <md-nav-bar md-selected-nav-item="currentnavitem" nav-bar-aria-label="navigation links"> <md-nav-item ng-repeat="item in navitems" md-nav-click="goto('{{item.value}}')" name="{{item.value}}">{{item.label}}</md-nav-item> </md-nav-bar> <span>{{currentnavitem}}</span> </md-content> </div> <div> <md-button class="md-raised md-primary" ng-click="additem()">add item</md-button> </div> </div>
js
(function() { 'use strict'; angular.module('myapp',['ngmaterial']) .controller('appctrl', appctrl); function appctrl($scope, $element, $compile) { $scope.currentnavitem = 'page1'; $scope.navitems = [ {value: "page1", label: "page one"}, {value: "page2", label: "page two"}, {value: "page3", label: "page three"}, ]; $scope.additem = function () { $scope.navitems.push( { value: "page" + ($scope.navitems.length + 1), label: "page" + ($scope.navitems.length + 1) } ); } } })();
Comments
Post a Comment