Question

目前正在https://playwithfire.firebaseapp.com/处理聊天应用，每当用户添加新房间时，我都希望输入新房间标签。目前，您可以添加一个房间，但之后需要点击它进入该房间并显示其内容。

我尝试更改属性md-selected =“selectedIndex”，但没有激活标签，因此没有内容显示。

有可能做我要求的事吗？到目前为止我得到了什么：

的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 a username...">
                        </div>
                        <div flex="95">
                            <!-- Post a message -->
                            <label>Message</label>
                            <textarea class="form-control" 
                                      ng-model="msg"
                                      ng-keydown="addMessage($event)" 
                                      id="messageInput"
                                      placeholder="Type a message...">
                            </textarea>
                        </div>

                        <div layout="row" layout-sm="column" layout-margin layout-fill layout-align="start end">
                            <!-- Click to send message -->
                            <div flex>
                                <md-button class="md-raised md-primary pull-left" ng-click="sendMessage()">Send</md-button>
                            </div>
                            <!-- Modal to 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 this to default to index 0 in roomList
    $scope.selectedIndex = 0;

    $scope.$on('RoomChange', function(event, data) {
        $scope.selectedIndex = data;
        console.log('Heard the 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 i = 0; i < 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 about disabled, not a feature i want to use
                //ShareFactory.roomList[index].disabled = false;
            }

            // Broadcast event to all children of rootScope
            // namely want RoomController to listen for this change
            $rootScope.$broadcast('RoomChange', index);
        }, function () {
            console.log('cancel');
        });
    };
});

Answer 1

雅知道，这肯定是在Github问题上提出来的，但由于其他高优先级问题，它可能已经被拖到了积压的位置。

我刚刚将此功能添加到掌握中： https://github.com/angular/material/commit/8285e2d0bb6efbc72e311ee85b619cbbe8437072

在第二个演示中我们的网站上很快就会看到它： https://material.angularjs.org/HEAD/#/demo/material.components.tabs

与此同时，您应该可以通过添加以下代码来解决此问题：

if(!found) {
  ShareFactory.roomList.push({ roomName : name});
  index = ShareFactory.roomList.length - 1;
  $timeout(function () {
    ShareFactory.selectedIndex = index;
  });
}

$timeout是必要的，因为您必须等到渲染完成之后才能将所选索引更新为新索引 - 否则，它会认为有效索引超出范围。

希望这有帮助！

角度材质 - 动态添加选项卡并更改为该选项卡

1 个答案: