使用角度添加后从下拉列表中删除项目

Question

HTML 代码

<!doctype html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="style.css">
  <script>
    document.write("<base href=\"" + document.location + "\" />");
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="MainCtrl">
  <h1> NG options</h1>
  <form name="addUser">
    Application:
    <select ng-model="filterAddUser.application" ng-init ="filterAddUser.application = 'STACK'" title="" ng-options="value as value for  (key , value) in applicationStatus">
    </select>
    Roles:
    <select ng-model="filterAddUser.role" title="" ng-init ="filterAddUser.role = 'R'" ng-options="role.value as role.param for role in roleStatus">
    </select>

    <button ng-click="addToCart()">AddItem</button>

    <div class="addCart">
      <ul ng-repeat="item in items">
        <li><b>Application:</b> {{item.application}}</li>
        <li><b>Role:</b> {{item.role}}</li>
        <li class="actionOptions">
          <button ng-click="toggleSelected($index)">removeItem</button>
        </li>
      </ul>
    </div>
  </form>
</body>
</html>

Javascript 代码

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

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

  $scope.items = [];

  $scope.applicationStatus = {
    "TEST App": "TEST",
    "ABC App": "ABC",
    "TRY App": "TRY",
    "SIR App": "SIR",
    "LOPR App": "LOPR",
    "STACK App": "STACK"
  };
  $scope.roleStatus = [{
    "param": "Read",
    "value": "R"
  }, {
    "param": "Write",
    "value": "W"
  }, {
    "param": "Admin",
    "value": "A"
  }, {
    "param": "Super Approver",
    "value": "SA"
  }, {
    "param": "Supervisor",
    "value": "S"
  }];


  $scope.addToCart = function() {

    $scope.items.push({
      application: $scope.filterAddUser.application,
      role: $scope.filterAddUser.role
    });
    // Clear input fields after push
    $scope.filterAddUser['application'] = "";
    $scope.filterAddUser['role'] = "";
  }

  $scope.toggleSelected = function(index) {
    $scope.items.splice(index, 1);
  };

});

我要做的就是当我将应用程序添加到购物车时，该应用程序需要从 dropdwon 中删除，并且当我单击需要推回购物车的删除项目时，我已经包含了一个plunker 以及http://plnkr.co/edit/kSsetX?p=preview 需要帮助。

Answer 1

更新了你的 plunkr：http://plnkr.co/edit/QQobh7Jx76r7lDzw7TzV

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

app.controller('MainCtrl', function($scope) {
  $scope.items = [];
  var deletedApplication = [];

  $scope.applicationStatus = {
    "TEST App": "TEST",
    "ABC App": "ABC",
    "TRY App": "TRY",
    "SIR App": "SIR",
    "LOPR App": "LOPR",
    "STACK App": "STACK"
  };

  $scope.roleStatus = [{
    "param": "Read",
    "value": "R"
  }, {
    "param": "Write",
    "value": "W"
  }, {
    "param": "Admin",
    "value": "A"
  }, {
    "param": "Super Approver",
    "value": "SA"
  }, {
    "param": "Supervisor",
    "value": "S"
  }];

  $scope.filterAddUser = {
    application: $scope.applicationStatus[0],
    role: $scope.roleStatus[0]
  };


  $scope.addToCart = function() {
    deletedApplication.push([
      $scope.filterAddUser.application,  $scope.applicationStatus[$scope.filterAddUser.application]
    ]);

    delete $scope.applicationStatus[$scope.filterAddUser.application];

    $scope.items.push({
      application: $scope.filterAddUser.application,
      role: $scope.filterAddUser.role
    });

    // Clear input fields after push
    $scope.filterAddUser['application'] = $scope.applicationStatus[0];
    $scope.filterAddUser['role'] = $scope.roleStatus[0];

  }

  $scope.toggleSelected = function(index) {
    var addApp = deletedApplication.filter(function(deletedApp){
      return deletedApp[0] === $scope.items[index].application;
    })[0];

    $scope.applicationStatus[addApp[0]] = addApp[1];  
    console.log($scope.applicationStatus);
    $scope.items.splice(index, 1);
  };

});