angularjs - Angular Material - Dynamically add tab and change to that tab -
currently working on chat app here https://playwithfire.firebaseapp.com/ , whenever user adds new room want new room tab entered. can add room need click afterwards enter room , display content.
i tried changing attribute md-selected="selectedindex" makes no tab active no content appears.
is possible i'm asking for? i've got far:
index.html
<div layout="column" ng-controller="roomcontroller"> <!-- tabs container --> <md-tabs md-stretch-tabs md-selected="selectedindex"> <!-- individual tab --> <md-tab ng-repeat="room in roomlist" label="{{room.roomname}}"> <div ng-controller="chatcontroller"> <!-- display messages --> <md-list> <md-item ng-repeat="msg in messages"> <md-item-content> <div class="md-tile-content"> <div class="bubble"> <strong>{{msg.from}}</strong><br> {{msg.body}} </div> </div> </md-item-content> </md-item> </md-list><!--/displaymessages--> <!-- chat controls --> <div layout="row" layout-margin layout-wrap> <div flex="33"> <!-- assign username --> <label for="nameinput">username</label> <input ng-model="name" type="text" id="nameinput" placeholder="enter username..."> </div> <div flex="95"> <!-- post message --> <label>message</label> <textarea class="form-control" ng-model="msg" ng-keydown="addmessage($event)" id="messageinput" placeholder="type message..."> </textarea> </div> <div layout="row" layout-sm="column" layout-margin layout-fill layout-align="start end"> <!-- click send message --> <div flex> <md-button class="md-raised md-primary pull-left" ng-click="sendmessage()">send</md-button> </div> <!-- modal add or join room --> <div flex ng-controller="modalcontroller"> <md-button class="md-raised md-primary pull-left" ng-click="open()">add or join room</md-button> </div> <!-- opens helper --> <div flex ng-controller="helpcontroller"> <md-button class="pull-right" ng-click="open()" ng-href="">need help?</md-button> </div> </div> </div><!--/chatcontroller--> </md-tab> </md-tabs><!--/tabs container--> </div><!--/roomcontroller--> room.js
angular.module('myapp') .controller('roomcontroller', function($scope, sharefactory) { $scope.roomlist = sharefactory.roomlist; // use default index 0 in roomlist $scope.selectedindex = 0; $scope.$on('roomchange', function(event, data) { $scope.selectedindex = data; console.log('heard change!'); console.log('the data is: ' + data); }); }); modal.js
angular.module('myapp') .controller('modalcontroller', function($rootscope, $scope, $modal, chatfactory, sharefactory) { $scope.open = function () { var modalinstance = $modal.open({ templateurl: 'views/modal.html', controller: 'modalinstancecontroller' }); modalinstance.result.then(function (name) { var found = false; var length = sharefactory.roomlist.length; var index = 0; for(var = 0; < length; ++i) { if(sharefactory.roomlist[i].roomname === name) { found = true; index = i; console.log('index ' + index); } } if(!found) { sharefactory.roomlist.push({ roomname : name}); index = sharefactory.roomlist.length - 1; } else { // don't care disabled, not feature want use //sharefactory.roomlist[index].disabled = false; } // broadcast event children of rootscope // namely want roomcontroller listen change $rootscope.$broadcast('roomchange', index); }, function () { console.log('cancel'); }); }; });
ya know, came in github issue while ago, may have been kicked backlog due other high priority issues.
i added feature master: https://github.com/angular/material/commit/8285e2d0bb6efbc72e311ee85b619cbbe8437072
and should viewable shortly on our site in second demo: https://material.angularjs.org/head/#/demo/material.components.tabs
in meantime, should able solve adding following code:
if(!found) { sharefactory.roomlist.push({ roomname : name}); index = sharefactory.roomlist.length - 1; $timeout(function () { sharefactory.selectedindex = index; }); } the $timeout necessary because must wait until after render finished before can update selected index new 1 - otherwise, think valid out of range.
hope helps!