Question

我正在尝试将动态添加的div大小更改为bootstrap grid cols ..我尝试使用单击功能将动态添加的div大小更改为所有添加的div。但我的问题是当我点击添加div它正在改变那个类，如果我选择另一个div来改变大小，但该功能正在应用于前一个div ..我想只改变选择的div大小..你可以检查下面的代码和演示..
DEMO

更新

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>

Answer 1

实际上您使用的是col-sm，因此col-sm仅适用于平板电脑屏幕。所以你必须使用col-xs然后才能正常工作。移动屏幕上col-sm会自动为100％。所以你必须使用col-xs。 https://jsfiddle.net/hamzanisar/az1mn5yq/

更改所选动态值的引导类

1 个答案: