3

I need your help...

I start angularJS and I have a little problem unsolved..

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

I tried something in Fiddle : 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!

Sorry for my bad spoken language.

4

3 回答 3

2

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

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

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

于 2013-07-17T09:35:22.520 回答
0

不确定这是否是您想要的，但这是一个 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，所以它用于 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;
};

希望有帮助！

于 2013-07-17T09:35:55.953 回答
0

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

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

于 2013-07-17T09:45:50.950 回答