Question

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.

Était-ce utile?

La solution

You're inside a loop so you need to use a single variable for each item :

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

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

Autres conseils

Not sure if this is what you want, but here is a jsfiddle:

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

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.

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.

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

<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 $index variable:

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

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

Changes from your code:

Here, $index is supplied to indicate the row.

<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 showacception and showdenied variables are now arrays. In fact, they are now part of the $scope object:

<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 NgHideShowApp controller:

This represents whether each row displays the accept or refused message. Initially, nothing is displayed. So everything is set to false.

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

And finally, the 2 reworked $scope methods. Once a button is clicked, either the accept or reject message is shown. Showing one sets the visibility of the other to invisible:

$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!

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/

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top