Question

我需要你的帮助......

我开始使用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（）。我希望它在点击时显示一个句子......

我在小提琴中尝试过一些东西： http://jsfiddle.net/TBGDu/17/

但这句话多次出现，但我希望它只出现一次我点击的地方。我尝试使用tab但是暂时没有用！

抱歉我的口语不好。

Answer 1

你在循环中，所以你需要为每个项目使用一个变量：

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

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

Answer 2

不确定这是否是你想要的，但这里是一个jsfiddle：

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

如果我理解正确，你想要为你按下接受按钮的行显示'je suis ton amis'，然后切换到显示你按下拒绝按钮的行的'你拒绝我'的字符串

对于您的原始代码，有一些错误：

如果您希望每行显示一次，则每行需要这两个变量。在我的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，因此用于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>

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

希望有所帮助！

Answer 3

您在范围内使用单个变量（对于所有行都是相同的）来存储状态 - 单击“接受”或“拒绝”按钮。实际上，需要的是为表中的每一行提供状态。为此，您可以将此状态信息添加到模型中。然后使用模型中的此信息根据单击的按钮显示和隐藏必要的句子。

 <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/

AngularJS ngTable中每行的按钮数

3 个答案: