Add/remove 框在 html 使用 angularJS

Question

我想 create/use 一个 add-remove 框，例如 HTML 中的 this 使用 angularJS，其中有一些 objects 的列表在左侧，您 select objects 将它们放在右侧列出的标题下。知道我们怎么称呼这样的 tables/lists 我可以 create/find 他们吗？

Answer 1

我不知道正确的称呼是什么:)

但我尝试实施 'add/remove box' 的示例，以通过 AngularJS!

实现您想要的概念

主体部分由三部分组成：

左侧部分 将添加
中间部分，其中包含按钮
右侧部分 将删除

下面的代码应用了上述部分：

<div class="box leftBox">
    <div>
        <div id="{{left.name}}" ng-click="clicked($event, 0)" data-ng-repeat="left in lefts">{{left.name}}</div>
    </div>
</div>

<div class="box button_holder">
    <button ng-click="add()" class="button button-blue">ADD ></button>
    <button ng-click="remove()" class="button button-red">< REMOVE</button>
    <button ng-click="addAll()" class="button button-blue button-dark">ADD ALL >></button>
    <button ng-click="removeAll()" class="button button-red button-dark"><< REMOVE ALL</button>
    <button ng-click="deleteChoice()" class="button delete">X</button>
</div>

<div class="box rightBox">
    <div>
        <div ng-click="clicked($event, 1)" data-ng-repeat="right in rights">{{right.name}}</div>
    </div>
</div>

通过使用包括 data-ng-repeat 在内的 angularjs 指令，您可以控制添加或删除

的过程

here is the implemented overview.

here is the completed code on the "codepen".

你也可以查看my github.

尝试运行片段 全屏 window!

/**
 * Created by ALIREZA on 8/30/2017.
 */

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

app.controller('Ctrl', function($scope) {
  var i;
  var isRepeated = false;
  var actionLicense = true;
  var prevElement = null;
  var currentElement = null;
  var positionSide = null;

  $scope.choices = ["left", "right"];

  $scope.lefts = [{
    id: 'left1'
  }, {
    id: 'left2'
  }, {
    id: 'left3'
  }, {
    id: 'left4'
  }];
  for (i = 0; i < $scope.lefts.length; i++) {
    $scope.lefts[i].name = "left" + (i + 1).toString();
  }

  $scope.rights = [{
    id: 'right1'
  }, {
    id: 'right2'
  }];
  for (i = 0; i < $scope.rights.length; i++) {
    $scope.rights[i].name = "right" + (i + 1).toString();
  }

  $scope.insert = function($event) {
    var side = $scope.selectedSide;
    if (side == null || side == "left") {
      var leftItemNo = $scope.lefts.length + 1;
      $scope.lefts.push({
        'id': 'left' + leftItemNo
      });
      $scope.lefts[leftItemNo - 1].name = $scope.choice.name;
    } else {
      var rightItemNo = $scope.rights.length + 1;
      $scope.rights.push({
        'id': 'right' + rightItemNo
      });
      $scope.rights[rightItemNo - 1].name = $scope.choice.name;
    }
  };

  $scope.deleteChoice = function() {
    if (positionSide === 0) {
      var ItemNo = -1;
      $scope.lefts.forEach(function(i, j) {
        if (i.name === currentElement.textContent) {
          ItemNo = j;
          return;
        }
      });
      $scope.lefts.splice(ItemNo, 1);
    }
  };

  $scope.add = function() {
    if (actionLicense && positionSide === 0) {
      actionLicense = false;

      var leftItemNo = -1;
      $scope.lefts.forEach(function(i, j) {
        if (i.name === currentElement.textContent) {
          leftItemNo = j;
          return;
        }
      });
      $scope.lefts.splice(leftItemNo, 1);

      var rightItemNo = $scope.rights.length + 1;
      $scope.rights.push({
        'id': 'right' + rightItemNo
      });
      $scope.rights[rightItemNo - 1].name = currentElement.textContent;

    }
  };

  $scope.remove = function() {
    if (actionLicense && positionSide === 1) {
      actionLicense = false;

      var rightItemNo = -1;
      $scope.rights.forEach(function(i, j) {
        if (i.name === currentElement.textContent) {
          rightItemNo = j;
          return;
        }
      });
      $scope.rights.splice(rightItemNo, 1);

      var leftItemNo = $scope.lefts.length + 1;
      $scope.lefts.push({
        'id': 'left' + leftItemNo
      });
      $scope.lefts[leftItemNo - 1].name = currentElement.textContent;

    }
  };

  $scope.addAll = function() {

    $scope.lefts.forEach(function(i) {
      var rightItemNo = $scope.rights.length + 1;
      $scope.rights.push({
        'id': 'right' + rightItemNo
      });
      $scope.rights[rightItemNo - 1].name = i.name;

    });
    $scope.lefts.splice(0, $scope.lefts.length);

  };

  $scope.removeAll = function() {

    $scope.rights.forEach(function(i) {
      var leftItemNo = $scope.lefts.length + 1;
      $scope.lefts.push({
        'id': 'left' + leftItemNo
      });
      $scope.lefts[leftItemNo - 1].name = i.name;

    });
    $scope.rights.splice(0, $scope.rights.length);

  };


  $scope.clicked = function($event, pos) {

    actionLicense = true;
    positionSide = pos;
    currentElement = $event.currentTarget;

    var deleteButton = document.getElementsByClassName("delete")[0];
    if (pos === 1) {
      if (deleteButton.className.indexOf("button-deactive") === -1) {
        deleteButton.className += " button-deactive";
      }
    } else {
      deleteButton.className = deleteButton.className.replace(" button-deactive", "");
    }

    if (prevElement === null) {
      prevElement = currentElement;
    } else {
      if (prevElement === currentElement) {
        isRepeated = !isRepeated;
      } else {
        if (isRepeated) {
          isRepeated = false;
        }
      }
    }
    if (prevElement.className.indexOf("active") !== -1) {
      prevElement.className = prevElement.className.replace(" active", "");
    }
    if (!isRepeated && currentElement.className.indexOf("active") === -1) {
      currentElement.className += " active";
    }
    prevElement = currentElement;
  };

});

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: inline-block;
  width: 100%;
  padding: 10px;
  height: 100vh;
  border: #E64A19 inset .7vh;
  background: #616161;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #9bc5c3, #616161);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #9bc5c3, #616161);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.addItems {
  height: 10vh;
  margin-bottom: 5vh;
}

.box {
  float: left;
  display: inline-block;
  margin: 0;
  padding: 10px;
  height: 80vh;
  border: #cfcfcf outset 2px;
  color: #eee;
  font-size: medium;
}

.box>div {
  border: #FFF59D ridge 2px;
  border-bottom: none;
  border-radius: 5px;
}

.box>div>div {
  padding: 7px;
  border-bottom: #FFF59D ridge 2px;
}

.box>div>div:hover {
  background-color: rgba(100, 150, 220, .5);
  transition: background-color .4s ease;
}

.box>button {
  display: inline-block;
  width: 70%;
  margin: 5% 15%;
}

.button {
  padding: 10px 24px;
  border-radius: 3px;
  border: none;
  box-shadow: 2px 5px 10px rgba(22, 22, 22, .1);
}

.button:hover {
  transition: all 60ms ease;
  opacity: .95;
  box-shadow: #444 0 3px 3px 0;
}

.button-blue {
  color: #FFFFFF;
  background: #416dea;
}

.button-red {
  color: #FFFFFF;
  background: #F32C52;
}

.button-dark {
  filter: brightness(85%) contrast(110%);
}

.leftBox {
  width: 40%;
}

.button_holder {
  width: 20%;
}

.rightBox {
  width: 40%;
}

input[type="text"],
select {
  padding: 5px;
}

.active {
  transition: all .1s ease;
  background-color: #888;
  color: #000;
  ;
  border: dotted 1px black;
  box-shadow: 0 2px 2px 0 rgba(97, 97, 97, .5);
  margin-bottom: 1px;
}

.button-deactive {
  opacity: .5;
  box-shadow: none;
}

.button-deactive:hover {
  opacity: .5;
  box-shadow: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>AddRemoveBox</title>

  <link rel="stylesheet" href="index.css">

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <!--include angularJs-->

  <script src="index.js"></script>
</head>

<body>

  <div class="container" ng-app="Add_Remove_Box" ng-controller="Ctrl">
    <fieldset class="addItems">
      <legend>Insert Items</legend>
      <select ng-model="selectedSide">
            <option ng-repeat="choice in choices">{{choice}}</option>
        </select>
      <input type="text" ng-model="choice.name" name="" placeholder="Enter The Item Name">
      <button class="button insert" value="insert" ng-click="insert($event)">Insert</button>
    </fieldset>
    <div class="box leftBox">
      <div>
        <div id="{{left.name}}" ng-click="clicked($event, 0)" data-ng-repeat="left in lefts">{{left.name}}</div>
      </div>
    </div>
    <div class="box button_holder">
      <button ng-click="add()" class="button button-blue">ADD ></button>
      <button ng-click="remove()" class="button button-red">< REMOVE</button>
      <button ng-click="addAll()" class="button button-blue button-dark">ADD ALL >></button>
      <button ng-click="removeAll()" class="button button-red button-dark"><< REMOVE ALL</button>
      <button ng-click="deleteChoice()" class="button delete">X</button>
    </div>
    <div class="box rightBox">
      <div>
        <div ng-click="clicked($event, 1)" data-ng-repeat="right in rights">{{right.name}}</div>
      </div>
    </div>
  </div>

</body>

</html>

Add/remove 框在 html 使用 angularJS

Add/remove box in html using angularJS

html

javascript

jquery-ui-sortable