怎么做Angular.js中的单选按钮Accordion

Question

我想要点击单选按钮时手风琴会打开，否则它会一直关闭。我尝试了类似下面的内容，

wishlist.html

<form name="createWishListForm">
    <md-toolbar class="md-accent md-hue-2">
        <div class="md-toolbar-tools" layout="row" layout-align="space-between center">
            <span class="title">Create a List</span>
            <md-button class="md-icon-button" ng-click="cancel()" aria-label="Close dialog">
                <md-icon md-font-icon="icon-close"></md-icon>
            </md-button>
        </div>
    </md-toolbar>

    <md-dialog-content>
        <md-input-container style="width:300px">
            <label>Wish List name</label>
            <input ng-model="vm.createWishListForm.name" name="name" required="true">
            <div ng-messages="createWishListForm.name.$error" ng-show="createWishListForm.name.$touched">
                <div ng-message="required">This field is required</div>
            </div>
        </md-input-container>

        <md-input-container>
            <md-radio-group ng-model="vm.createWishListForm.wishListType">
                <md-radio-button value="Public">Public</md-radio-button>
                <md-radio-button value="Shared">Shared</md-radio-button>
                    <div class="friendsList"  flex style="width:300px; margin-left:60px">
                        <md-list ng-cloak>
                            <md-list-item ng-repeat="contact in contacts">
                                <md-checkbox class="md-secondary" ng-model="contact.selected" value={{friend.email}}></md-checkbox>
                                <p> {{ contact.name }} </p>
                            </md-list-item>
                        </md-list>
                    </div>
                <md-radio-button value="Private">Private</md-radio-button>
            </md-radio-group>
        </md-input-container>
    </md-dialog-content>



     <div class="md-actions" layout="row" layout-align="space-between center">
        <div layout="row" layout-align="start center">
            <md-button ng-click="cancel()" class="send-button md-accent md-raised" aria-label="Cancel">Cancel</md-button>
            <md-button ng-click="createWishListForm.$valid && create(vm.createWishListForm)" class="send-button md-accent md-raised" aria-label="Create">Create a Wish List</md-button>
        </div>
    </div>
</form>

wishlistController.js

function WishListController($http, $location, $localStorage, $scope, $rootScope, $mdDialog, $document, $window)
{
    var vm = this;
    vm.uid = $localStorage._id;
    //console.log(vm.uid);

    $http({
            url:'http://192.168.2.8:7200/api/importContacts',
            method:'POST',
            data: {uId : vm.uid}
        }).then(function(res){
            //console.log(res.data.result);
            if(res.data.result === null || res.data.result.contacts === null){
                 console.log("no results");
            }else{
                vm.contacts = res.data.result.contacts;
                //console.log(vm.contacts);
            }
        }, function(error){
            alert(error.data);
        });

    vm.creatListDialog = function (ev){
        vm.name = $localStorage.name;
        $mdDialog.show({
            controller         : vm.CreateWishListDialogController,
            controllerAs       : 'vm',  
            locals             : {
                item: vm.contacts
            },
            templateUrl        : 'app/main/apps/wishlist/create-wishlist.html',
            parent             : angular.element($document.body),
            targetEvent        : ev,
            clickOutsideToClose: true,
        })
        .then(function(userData) {
            refresh();
             vm.status = '' + userData.name + 's Wish List ' + userData.wishListType + '.';
        }, function() {
            vm.status = 'You cancelled the dialog.';
        });
    };

    vm.CreateWishListDialogController = function($scope, $mdDialog, item){
        $scope.hide = function() {
            $mdDialog.hide();
        };
        $scope.cancel = function() {
            $mdDialog.cancel();
        };

        $scope.contacts = item;

        //$scope.type = 'Shared';

        $scope.create = function(userData) {
            //console.log(userData);
            $http({
                url: 'http://192.168.2.8:7200/api/creatList',
                method: 'POST',
                data: {wData:userData, uId:vm.uid}
            }).success(function(res) {
                console.log("success");
            }, function(error) {
                console.log(error);
                alert('here');
            });

            $mdDialog.hide(userData);
        };
    }
 }

上图显示了一切。当我点击共享单选按钮时，只有friendsList div会打开，否则它将一直关闭。怎么做请帮助我。

Answer 1

尝试将模型分配给单选按钮，然后相应地切换friends容器的可见性：

 <md-input-container>
        <md-radio-group  ng-model="vm.createWishListForm.wishListType">
            <md-radio-button value="Public">Public</md-radio-button>
            <md-radio-button  value="Shared">Shared</md-radio-button>
                <div class="friendsList" ng-hide="vm.createWishListForm.wishListType !== 'Shared'"  flex style="width:300px; margin-left:60px">
                    <md-list ng-cloak>
                        <md-list-item ng-repeat="contact in contacts">
                            <md-checkbox class="md-secondary" ng-model="contact.selected" value={{friend.email}}></md-checkbox>
                            <p> {{ contact.name }} </p>
                        </md-list-item>
                    </md-list>
                </div>
            <md-radio-button  value="Private">Private</md-radio-button>
        </md-radio-group>
    </md-input-container>