我怎樣才能制作一個可以用作切換的按鈕，我的功能是這樣的 - >
$scope.update=(id, command)=> {
if (command === "remove") {
//logic to remove
} else if (command === "add") {
//logic to add
}
}
在這里，我需要將 id 和 command 作為引數傳遞給ng-click.
<button ng-click="update(data.id, 'add')" class="btn btn-primary">Add</button>
<button ng-click="update(data.id, 'remove')" class="btn btn-warning">Remove</button>
目前我必須使用兩個按鈕來完成簡單的任務，我怎樣才能讓它像使用一個按鈕一樣我可以做同樣的事情！！
uj5u.com熱心網友回復：
您缺少的部分是存盤按鈕的切換狀態。
$scope.toggleButton = { inAddState: true };
$scope.update = (id, button) => {
if (button.inAddState) {
// logic to add
} else {
// logic to remove
}
// make sure you switch the state of the button at some point
button.inAddState = !button.inAddState;
}
<button ng-click="update(data.id, toggleButton)"
class="btn {{ toggleButton.inAddState ? 'btn-primary' : 'btn-warning' }}"
ng-bind="toggleButton.inAddState ? 'Add' : 'Remove'">
</button>
在這種情況下，元素中只有兩個地方必須考慮狀態：類和文本。在我看來，一旦達到三個或更多，使用兩個元素ng-if而不是在一個元素中包含一堆條件會更簡單。例如，如果您希望title屬性也是有條件的。
<button ng-click="update(data.id, toggleButton)"
ng-if="toggleButton.inAddState"
class="btn btn-primary"
title="Click to add">
Add
</button>
<button ng-click="update(data.id, toggleButton)"
ng-if="!toggleButton.inAddState"
class="btn btn-warning"
title="Click to remove">
Remove
</button>
代替
<button ng-click="update(data.id, toggleButton)"
class="btn {{ toggleButton.inAddState ? 'btn-primary' : 'btn-warning' }}"
ng-bind="toggleButton.inAddState ? 'Add' : 'Remove'"
title="Click to {{ toggleButton.inAddState ? 'add' : 'remove' }}">
</button>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/399265.html