更改选定动态值的引导类

change bootstrap classes for selected dynamic values

本文关键字：动态      更新时间：2023-09-26

我正在尝试将动态添加的div大小更改为引导网格列。 我尝试使用单击功能将动态添加的div 大小更改为所有添加的div。 但是当我单击添加的div 时，我的问题是它正在更改该类，如果我选择另一个div 来更改大小，但该函数正在应用于以前的div.. 我只想更改选定的div 大小.. 你可以检查我的下面的代码和演示..
演示

更新

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>

实际上您正在使用col-sm因此col-sm只能在平板电脑屏幕上工作。所以你必须使用col-xs然后它就可以正常工作了。 col-sm将自动在手机屏幕上显示100%。所以你必须使用col-xs.https://jsfiddle.net/hamzanisar/az1mn5yq/

相关文章：