一旦其加入採用了棱角分明

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中刪除，也當我點擊刪除項目，需要推回到購物車我已經包括一個蹲跳者以及http://plnkr.co/edit/kSsetX?p=preview 需要同樣的幫助。

來源

2015-05-29 user1767986

更新您的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); 
    }; 

});

來源

2015-05-29 04:19:27

我會更新你的plunkr並在一分鐘內更新我的答案。另外我只注意到你的plunkr使用的是不同於你發佈的代碼，那就是我的困惑！ –

這段代碼應該讓你知道它應該放在哪裏。讓我知道你是否需要更多幫助。 –

再次更新。讓我知道這是否適合你。這有點棘手，因爲applicationStatus是一個對象。 Plunkr更新以及代碼在答案 –

一旦其加入採用了棱角分明

回答

相關問題