Kevin Kevin - 3 months ago 48
Sass (Sass) Question

How to do Radio button Accordion in Angular.js

I want to do like when I click on Radio button the accordion will open otherwise it always be closed. I have tried something like below,

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);
};
}
}


result

The above picture shows everything. When I click on the shared radio button then only friendsList div will open otherwise it always be closed. How to do this please help me.

Answer

Try assigning a model to the radio buttons and then toggle the visibility of the friends container accordingly:

 <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>
Comments