javascript AngularJS ngTable 中每行的按钮数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17695364/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Buttons per Row in AngularJS ngTable
提问by user2587877
I need your help...
我需要你的帮助...
I start angularJS and I have a little problem unsolved..
我开始使用 angularJS，但有一个小问题未解决。
<table>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>
<button ng-click="accept($index)"><strong>accept</strong></button>
<button ng-click="refuse()"><strong>refuse</strong></button>
<p ng-show="showResult($index)"><strong>je suis ton amis</strong></p>
<p ng-show="showResult2()"><strong>you refuse me</strong></p>
</td>
</tr>
</tbody>
</table>
I have a table that contains 2 buttons in each line: ACCEPT and REFUSE with their respective methods accept() and refuse(). I want it to show one sentence on click...
我有一个表格，每行包含 2 个按钮：ACCEPT 和 REFUSE 以及它们各自的方法 accept() 和 reject()。我希望它在单击时显示一个句子...
I tried something in Fiddle : http://jsfiddle.net/TBGDu/17/
我在小提琴中尝试了一些东西：http: //jsfiddle.net/TBGDu/17/
But the sentence appears many times, but I want it to appear just once where I click. I tried something with tab but for the moment nothing work!
但是这句话出现了很多次，但我希望它在我点击的地方只出现一次。我用 tab 尝试了一些东西，但目前没有任何效果！
Sorry for my bad spoken language.
对不起，我的口语不好。
采纳答案by Florian F
You're inside a loop so you need to use a single variable for each item :
你在一个循环中，所以你需要为每个项目使用一个变量：
$scope.accept = function(idx){
$scope.showacceptation[idx] = true;
}
回答by yanhan
Not sure if this is what you want, but here is a jsfiddle:
不确定这是否是您想要的，但这里有一个 jsfiddle：
If I understand correctly, you want to display 'je suis ton amis' for the row for which you pressed the accept button, and switch over to displaying the string 'you refuse me' for the row that you pressed the reject button.
如果我理解正确，您希望为您按下接受按钮的行显示“je suis ton amis”，并切换到为您按下拒绝按钮的行显示字符串“您拒绝我”。
For your original code, there are a few mistakes:
对于你的原始代码，有几个错误：
If you want the display to be per row, you will need to have these 2 variables for each row. In my jsfiddle, I used an array.
如果您希望每行显示，则需要为每一行设置这 2 个变量。在我的 jsfiddle 中，我使用了一个数组。
var showacceptation = false;
var showdenied = false;
For this piece of code, since what's displayed on each row is independent of other rows and dependent on its own state, then you should supply a parameter to it (think $index).
对于这段代码，由于每行显示的内容独立于其他行并取决于其自己的状态，因此您应该为其提供一个参数（想想$index）。
<button ng-click="refuse()"><strong>refuse</strong></button>
Which means this will need to change to accept a parameter indicating the row as well.
这意味着这将需要更改以接受指示行的参数。
$scope.refuse = function(){
//my function to refuse User +
showdenied = true;
}
}
Same mistake as above, you need to supply the row number using the $indexvariable:
与上面相同的错误，您需要使用$index变量提供行号：
<p ng-show="showResult2()"><strong>you refuse me</strong></p>
My JSFiddle:
我的 JSFiddle：
HTML:
HTML：
<body ng-app="NgHideShowApp">
<div ng-controller="AppCtrl">
<table>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>
<button ng-click="accept($index)"><strong>accept</strong>
</button>
<button ng-click="refuse($index)"><strong>refuse</strong>
</button>
<p ng-show="showacceptation[$index]"><strong>je suis ton amis</strong></p>
<p ng-show="showdenied[$index]"><strong>you refuse me</strong></p>
</td>
</tr>
</tbody>
</table>
</div>
</body>
JavaScript:
JavaScript：
angular.module('NgHideShowApp', [])
.controller('AppCtrl', [
'$scope',
function($scope){
$scope.users = [{name: 'firstUser'},
{name: 'secondUser'},
{name: 'User3'},
{name: 'User4'}
];
$scope.showacceptation = [false, false, false, false];
$scope.showdenied = [false, false, false, false];
$scope.accept = function(idx) {
var i = $scope.users[idx];
console.log('value2 i:',i);
$scope.showacceptation[idx] = true;
$scope.showdenied[idx] = false;
};
$scope.refuse = function(idx) {
$scope.showdenied[idx] = true;
$scope.showacceptation[idx] = false;
};
}
]);
Changes from your code:
从您的代码更改：
Here, $indexis supplied to indicate the row.
在这里，提供$index来指示行。
<button ng-click="refuse($index)"><strong>refuse</strong>
</button>
We can use ng-show on the values of variables, so that's used for the 2 paragraphs. Notice that the showacceptionand showdeniedvariables are now arrays. In fact, they are now part of the $scopeobject:
我们可以对变量的值使用 ng-show，所以它用于 2 个段落。请注意，showacception和showdenied变量现在是数组。事实上，它们现在是$scope对象的一部分：
<p ng-show="showacceptation[$index]"><strong>je suis ton amis</strong></p>
<p ng-show="showdenied[$index]"><strong>you refuse me</strong></p>
Inside the NgHideShowAppcontroller:
在NgHideShowApp控制器内部：
This represents whether each row displays the accept or refused message. Initially, nothing is displayed. So everything is set to false.
这表示每行是显示接受还是拒绝消息。最初，不显示任何内容。所以一切都设置为false。
$scope.showacceptation = [false, false, false, false];
$scope.showdenied = [false, false, false, false];
And finally, the 2 reworked $scopemethods. Once a button is clicked, either the accept or reject message is shown. Showing one sets the visibility of the other to invisible:
最后，2 个重新设计的$scope方法。单击按钮后，将显示接受或拒绝消息。显示一个将另一个的可见性设置为不可见：
$scope.accept = function(idx) {
var i = $scope.users[idx];
console.log('value2 i:',i);
$scope.showacceptation[idx] = true;
$scope.showdenied[idx] = false;
};
$scope.refuse = function(idx) {
$scope.showdenied[idx] = true;
$scope.showacceptation[idx] = false;
};
Hope that helps!
希望有帮助！
回答by user700284
You were using a single variable in the scope (which would be the same for all the rows)for storing the state - whethere accept or refuse button is clicked. Actually what is needed is to have the state for each of the rows in the table . For that you can add this state information into your model.Then use this information from your model to show and hide the necessary sentence based on which button has been clicked.
您在范围内使用单个变量（对于所有行都相同）来存储状态 - 无论是单击接受还是拒绝按钮。实际上需要的是为表中的每一行提供状态。为此，您可以将此状态信息添加到您的模型中。然后使用您模型中的此信息来显示和隐藏基于点击了哪个按钮的必要句子。
<body ng-app="NgHideShowApp">
<div ng-controller="AppCtrl">
<table>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>
<button ng-click="accept($index)"><strong>accept</strong>
</button>
<button ng-click="refuse($index)"><strong>refuse</strong>
</button>
<p ng-show="user.accept"><strong>je suis ton amis</strong>
</p>
<p ng-show="user.refuse"><strong>you refuse me</strong>
</p>
</td>
</tr>
</tbody>
</table>
</div>
</body>
angular.module('NgHideShowApp', [])
.controller('AppCtrl', ['$scope', function ($scope) {
var showacceptation = false;
var showdenied = false;
$scope.users = [{
name: 'firstUser',
accept: false,
reject: false
}, {
name: 'secondUser',
accept: false,
reject: false
}, {
name: 'User3',
accept: false,
reject: false
}, {
name: 'User4',
accept: false,
reject: false
}];
$scope.accept = function (idx) {
//my function to accept User +
var i = $scope.users[idx]; //select line -> hide ACCEPT/REFUSE BUTTON
console.log('value2 i:', i)
i.accept = true;
i.refuse = false;
}
$scope.refuse = function (idx) {
//my function to refuse User +
var i = $scope.users[idx];
i.refuse = true;
i.accept = false;
}
}]);
Demo here - http://jsfiddle.net/TBGDu/27/
演示在这里 - http://jsfiddle.net/TBGDu/27/
