javascript - change bootstrap classes for selected dynamic values -
i trying change dynamically added div sizes in bootstrap grid cols.. tried change dynamically added div sizes using single click function added divs. problem when clicked on added div changing class,, if selected div change size, function applying previous div.. want change selected div size.. can check code below , demo..
demo
updated
var app = angular.module('myapp', ['ngsanitize']); app.controller('mainctrl', function ($scope, $compile) { $scope.usernames = []; $scope.emails = []; var counter = 0; $scope.add_username = function (index) { $scope.usernames[counter] = { user: 'username', size: 'col-xs-12' }; var userdiv = '<div ng-click="selectuser(usernames[\'' + counter + '\']);show(\'div1\',' + counter + ')" class="{{usernames[' + counter + '].size}}" ng-class="{selected : ' + counter + ' == active}">\n\ <label>{{usernames[' + counter + '].user}}</label>//click//</div>'; var user = $compile(userdiv)($scope); angular.element(document.getelementbyid('add')).append(user); $scope.changetolarge = function () { $scope.username.size = 'col-xs-12'; }; $scope.changetomedium = function () { $scope.username.size = 'col-xs-6'; }; $scope.changetosmall = function () { $scope.username.size = 'col-xs-4'; }; ++counter; }; $scope.selectuser = function (val) { $scope.username = val; }; $scope.add_email = function (index) { $scope.emails[counter] = { email: 'email', size: 'col-xs-12' }; var emaildiv = '<div ng-click="selectemail(emails[\'' + counter + '\']);show(\'div2\',' + counter + ')" class="{{emails[' + counter + '].size}}" ng-class="{selected : ' + counter + ' == active}">\n\ <label>{{emails[' + counter + '].email}}</label>//click//</div>'; var email = $compile(emaildiv)($scope); angular.element(document.getelementbyid('add')).append(email); $scope.changetolarge = function () { $scope.email.size = 'col-xs-12'; }; $scope.changetomedium = function () { $scope.email.size = 'col-xs-6'; }; $scope.changetosmall = function () { $scope.email.size = 'col-xs-4'; }; ++counter; }; $scope.selectemail = function (val) { $scope.email = val; }; $scope.show = function (arg,counter) { $scope.divshow = arg; $scope.active = counter; } });.selected{ background-color: #f2dede; }<!doctype html> <html ng-app="myapp"> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script> <script src="https://code.angularjs.org/1.5.0-rc.0/angular-sanitize.min.js"></script> <script src="js.js"></script> </head> <body ng-controller="mainctrl"> <button ng-click="add_username($index)">add username</button> <button ng-click="add_email($index)">add email</button> <div id="add"></div> <form ng-show="divshow == 'div1'"> <label>field label(?)</label> <br/> <input ng-model="username.user"> </form> <form ng-show="divshow == 'div2'"> <label>field label(?)</label> <br/> <input ng-model="email.email"> </form> <div ng-show="divshow"> <label>field size(?)</label> <br/> <select> <option value="" disabled selected>select size</option> <option ng-click="changetolarge()" ng-model="selected">large</option> <option ng-click="changetomedium()" ng-model="selected">medium</option> <option ng-click="changetosmall()" ng-model="selected">small</option> </select> </div> </body> </html>
actually using col-sm col-sm work on tablet screen. have use col-xs work fine. col-sm automatically 100% on mobile screen. have use col-xs. https://jsfiddle.net/hamzanisar/az1mn5yq/
Comments
Post a Comment