AngularJS ngTable中每行按钮数

我需要你的帮助。。。

我启动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>

我有一个表，每行包含2个按钮：ACCEPT和REFUSE以及它们各自的方法ACCEPT（）和REFUSE（）。我希望它在点击时显示一句话。。。

我在Fiddle尝试了一些东西：http://jsfiddle.net/TBGDu/17/

但是这个句子出现了很多次，但我希望它在我点击的地方只出现一次。我试过用tab做点什么，但暂时没用！

抱歉我的口语不好。

您处于循环中，因此需要为每个项目使用一个变量：

$scope.accept = function(idx){
   $scope.showacceptation[idx] = true;
}

http://jsfiddle.net/TBGDu/24/

不确定这是否是您想要的，但这里有一个jsfiddle:

http://jsfiddle.net/TBGDu/25/

如果我理解正确，你想为你按下接受按钮的那一行显示"je suis ton amis"，并切换到为你按下拒绝按钮的那行显示字符串"你拒绝我"。

对于您的原始代码，有几个错误：

如果希望按行显示，则每行需要有这2个变量。在我的jsfiddle中，我使用了一个数组。

var showacceptation = false;
var showdenied = false;

对于这段代码，由于每行上显示的内容独立于其他行，并取决于其自身的状态，因此您应该为其提供一个参数（想想$index）。

<button ng-click="refuse()"><strong>refuse</strong></button>

这意味着这也需要更改以接受指示行的参数。

$scope.refuse = function(){
   //my function to refuse User +
 showdenied = true;

}

与上述错误相同，您需要使用$index变量提供行号：

<p ng-show="showResult2()"><strong>you refuse me</strong></p>

我的JSFiddle:

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:

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;
            };
        }
]);

代码更改：

这里，提供$index来指示行。

<button ng-click="refuse($index)"><strong>refuse</strong>
</button>

我们可以在变量的值上使用ng show，所以这用于两段。请注意，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>

NgHideShowApp控制器内部：

这表示每行显示的是接受消息还是拒绝消息。最初，不显示任何内容。所以一切都是假的。

$scope.showacceptation = [false, false, false, false];
$scope.showdenied = [false, false, false, false];

最后，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;
};

希望能有所帮助！

您在作用域中使用了一个变量（对于所有行都是相同的）来存储状态，无论单击了接受还是拒绝按钮。实际上，所需要的是拥有表中每一行的状态。为此，您可以将此状态信息添加到模型中。然后使用模型中的这些信息，根据单击的按钮显示和隐藏必要的句子。

 <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;
    }

}]);

此处演示-http://jsfiddle.net/TBGDu/27/

相关内容

最新更新

热门标签：