取消選擇ng-repeat中的選定行

-2

如何取消選擇我剛剛選擇的行，使用與之前選擇的相同按鈕並突出顯示ng-repeat列表中的行？有什麼不同的選擇，有沒有人有任何例子或鏈接，因爲我找不到任何？取消選擇ng-repeat中的選定行

編輯： - 請參閱Plunker使用鏈接 https://plnkr.co/edit/LYrmpLUwGaWx8wLeCOoT

代碼是在這裏： -

HTML

<head> 
<meta charset="utf-8" /> 
<title>AngularJS Plunker</title> 
<script>document.write('<base href="' + document.location + '" />');</script> 
<link rel="stylesheet" href="style.css" /> 
<script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script> 
<script src="app.js"></script> 
</head> 

<body ng-controller="MainCtrl"> 
<div ng-repeat="item in items" ng-class="{sel: item.Item == selected}"> 
    <label>Item No. {{item.Item}}</lablel> | 
    <label>{{item.Description}}</label> | 
    <button ng-click="onClick(item.Item);" class="btn btn-primary"> 
    {{item.Item == selected ? 'Hide' : 'Show'}} 
    </button> 
    </div> 
    <br /> 
    <br /> 
    <div ng-switch="moduleState"> 
      <div ng-switch-when="details"> 
       These are your details:- 
       Item {{selected}} is selected 
       </div> 
</body> 
</html>

app.js

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

app.controller('MainCtrl', function($scope) { 
$scope.items = [ 
    { 
     Item: 1, 
     Description: 'This is item 1' 
    }, 
    { 
     Item: 2, 
     Description: 'This is item 2' 
    }, 
    { 
     Item: 3, 
     Description: 'This is item 3' 
    } 
]; 

$scope.onClick = function (item) { 
    $scope.selected = item; 
    $scope.moduleState = 'details'; 
}; 
});

一旦選擇了其中一個按鈕，我該如何取消選擇它？

來源

2016-08-17 user1319501

你是什麼意思「選擇一排？」請分享一個小提琴，或至少你的HTML。 – Kraken

@Kraken剛剛更新了問題 – user1319501

而且還很不清楚。我們不知道第一個片段與第二個片段有關。一個使用切換和一個mysteerious show（）函數。另一個使用moduleState。發佈一個完整的，最小的例子來重現問題。 –

$scope.onClick = function(item) { 
    if ($scope.selected === item) { 
    $scope.selected = null; 
    } 
    else { 
    $scope.selected = item; 
    } 
};

並在視圖：

<div ng-repeat="item in items" ng-class="{sel: item.Item == selected}"> 
    <label>Item No. {{item.Item}}</lablel> | 
    <label>{{item.Description}}</label> | 
    <button ng-click="onClick(item.Item);" class="btn btn-primary"> 
    {{item.Item == selected ? 'Hide' : 'Show'}} 
    </button> 
</div> 

<br /> 
<br /> 

<div ng-if="selected"> 
    These are your details:- 
    Item {{ selected }} is selected 
</div>

來源

2016-08-18 10:20:48

檢查下面的plunkr：

https://plnkr.co/edit/u7I9nIRZgOMB7vqBr92n?p=preview

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

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.items = [ 
 
     { 
 
      Item: 1, 
 
      isVisible: false, 
 
      Description: 'This is item 1' 
 
     }, 
 
     { 
 
      Item: 2, 
 
      isVisible: false, 
 
      Description: 'This is item 2' 
 
     }, 
 
     { 
 
      Item: 3, 
 
      isVisible: false, 
 
      Description: 'This is item 3' 
 
     } 
 
    ]; 
 
    
 
    $scope.onClick = function (item) { 
 
     if(!item.isVisible) { 
 
     item.isVisible = !item.isVisible; 
 
     $scope.selected = item.Item; 
 
     $scope.moduleState = 'details'; 
 
     } else { 
 
     item.isVisible = !item.isVisible; 
 
     $scope.selected = $scope.moduleState = ""; 
 
     } 
 
    }; 
 
});

<button ng-click="onClick(item);" class="btn btn-primary"> 
 
     {{item.Item == selected ? 'Hide' : 'Show'}} 
 
     </button>

基本上我所做的是：

添加到每一行
已切換的標誌，當其設置爲可見
在第二次點擊，如果它可見，隱藏一個標誌「可見性」。

來源

2016-08-18 10:25:06

取消選擇ng-repeat中的選定行

回答

相關問題