按鈕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

回答

相關問題