您的位置：首页 > 运维架构

动态添加Option

2016-01-20 10:50 351 查看

项目中后台管理设置，前台下拉动态添加option

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="bootstrap.min.css">

<script src="jquery.min.js"></script>

<script src="angular.js"></script>

<script src="angular-animate.js"></script>

<script src="bootstrap.min.js"></script>

<script type="text/javascript">

var app = angular.module('myapp', []);

app.controller('DemoCtrl', function ($scope) {

$scope.optionContainer = [];

var realOptions = [];

var randomCode = function() {

var chars = "abcdefghijkmnopqrstuvwxyzABCDEFGHJKMNOPQRSTUVWXYZ1234567890";

var randomChars = "";

for (var i = 0; i < 10; i++) {

var index = Math.floor(Math.random() * chars.length);

randomChars = randomChars + chars.charAt(i);

}

return randomChars;

}

var getIndex = function(array, id) {

var tmpItem = {};

angular.forEach(array, function(item) {

if (item.id == id) {

tmpItem = item;

}

});

return array.indexOf(tmpItem);

}

$scope.add = function() {

var optionIndex = randomCode();

$scope.optionContainer.push({

id : optionIndex,

readOnly : false,

content : '',

showConfirm : true

})

console.log($scope.optionContainer)

}

$scope.confirm = function(content, id) {

if (content == '') {

return;

}

var flag = false;

angular.forEach(realOptions, function(item) {

if (item == content) {

flag = true;

}

});

if (flag) {

console.log('already exist!');

return;

}

var tmpIdIndex = getIndex($scope.optionContainer, id);

realOptions.push(content);

$scope.optionContainer[tmpIdIndex].showConfirm = false;

$scope.optionContainer[tmpIdIndex].readOnly = true;

}

$scope.deleteFunc = function(id) {

var tmpIdIndex = getIndex($scope.optionContainer, id);

if ($scope.optionContainer[tmpIdIndex].showConfirm == false) {

tmpIndex = realOptions.indexOf($scope.optionContainer[tmpIdIndex].content);

realOptions.splice(tmpIndex, 1);

}

$scope.optionContainer.splice(tmpIdIndex, 1);

}

});

</script>

</head>

<body ng-app="myapp">

<div ng-controller="DemoCtrl">

<div>

<div class="container">

<h1>create options</h1>

</div>

<div>

<div>

<table class="table table-striped table-hover">

<thead>

<tr>

<th>option</th>

</tr>

</thead>

<tbody>

<tr ng-repeat="item in optionContainer" class="row">

<td class="col-md-8" style="width:100%;">

<input type="text" ng-model="item.content" ng-readonly="item.readOnly"/></td>

<td class="col-md-2">

<button type="button" class="btn btn-success btn-xs" ng-click="confirm(item.content, item.id)" ng-show="item.showConfirm">Confirm

</button>

</td>

<td class="col-md-2">

<button type="button" class="btn btn-success btn-xs" ng-click="deleteFunc(item.id)">Delete

</button>

</td>

</tr>

</tbody>

</table>

</div>

<a class="btn btn-success btn-xs" ng-click="add()">Add</a>

</div>

</div>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航