按钮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（）和拒绝（）。我想让它显示在点击一个句子......

我试着捣鼓东西： http://jsfiddle.net/TBGDu/17/

但是这句话多次出现，但我希望它只是一次，我点击出现。我尝试了一些与标签，但暂时没有工作！

对不起，我的口语不好。

来源

2013-07-17 user2587877

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

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

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

来源

2013-07-17 09:35:22

感谢这么多，我做我想做的最后！ http://jsfiddle.net/TBGDu/28/ – user2587877

不知道这是否是你想要的，但这里是一个的jsfiddle：

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

如果我理解正确的话，你要显示“猪乙脑AMIS吨”为您按接受屁股行打开，然后切换到显示您按下拒绝按钮的行的字符串'您拒绝我'。

为了您的原代码，有几个错误：

如果你想显示为每行，你需要有这2个变量的每一行。在我的jsfiddle中，我使用了一个数组。

var showacceptation = false; 
var showdenied = false;

对于这段代码，因为真实显示在每行的是独立于其他行，并且依赖于它自己的状态，那么你应该提供一个参数，它（想想$指数）。

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

这意味着这将需要更改为接受指示该行的参数。

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

}

同样的错误如上，你需要使用$指数变量提供行号：

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

变化：

这里，$指数提供指示该行。

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

我们可以在变量的值上使用ng-show，以便用于2段。请注意，showacception和showdenied现在变量数组。事实上，他们现在$范围对象的一部分：里面的NgHideShowApp控制器

<p ng-show="showacceptation[$index]"><strong>je suis ton amis</strong></p> 
<p ng-show="showdenied[$index]"><strong>you refuse me</strong></p>

：

这表示每行显示是否接受或拒绝的消息。最初，没有显示。所以一切都设置为false。

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

最后，2返工$范围方法。点击按钮后，显示接受或拒绝信息。显示另一个隐形的可见性：

$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-17 09:35:55 yanhan

这就是我不能单独做的事情... * Noob * 我实现我的代码谢谢 http://jsfiddle.net/TBGDu/28/ – user2587877

您使用的范围的单个可变（这将是相同的所有行），用于存储状态 - whethere被点击接受或拒绝按钮。实际上我们需要的是为表格中的每一行创建状态。对于您可以添加此状态信息到您的model.Then使用从模型此信息基础上被点击了哪个按钮来显示和隐藏必要的句子。

<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-17 09:45:50 user700284

按钮AngularJS ngTable

回答

相关问题