如何在ng-repeat中使用ng-change

我試圖在每次單擊複選框時在ng-change內執行一個函數。我需要得到模型的價值，或在某種程度上知道被點擊的複選框，這樣我可以調用對應的其他功能的檢查值，並且還當複選框被未點擊的時候，這樣我可以HODE一些值如何在ng-repeat中使用ng-change

不肯定，如果我使用的方法是正確的，但這個是我的代碼： plunker

HTML

<input type="checkbox" ng-model="data.model" ng-change="onChnage()" class='checkbox'>

$scope.onChnage = function(){ 
    if($scope.index == true){ 
     $scope.indexonClick(); 
    } else if($scope.aggs == true){ 
     $scope.aggsonClick(); 
    } else if($scope.index == false){ 
     console.log('false'); 
    } 
}; 

$scope.indexonClick = function(){ 
    alert('index Clicked!'); 
} 

$scope.aggsonClick = function(){ 
    alert('aggs Clicked!'); 
};

來源

2016-10-19 Imi

你在哪裏有'$ scope.index'什麼你到底需要在答？ – Sravan

但是，爲什麼你需要知道該行的名稱？ – raina77ow

我需要知道如果ng模型是真的或假的，因爲在那個值我想執行另一個功能 – Imi

請選中該代碼，

// Code goes here 
 

 
var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    
 

 
    $scope.tableData = [{ 
 
    name: 'Index', 
 
    url: '#', 
 
    valueMain: 12, 
 
    tValue: 13, 
 
    model: 'index', 
 
    subvalues: [{ 
 
     name: 'Keys', 
 
     url: '#', 
 
     valueSub: 544, 
 
     tValue: 67 
 
    }, { 
 
     name: 'Leaders', 
 
     url: '#', 
 
     valueSub: 67, 
 
     tValue: 89 
 
    }] 
 
    }, { 
 
    name: 'Aggregators', 
 
    url: '#', 
 
    valueMain: 78, 
 
    tValue: 91, 
 
    model: 'aggs', 
 
    subvalues: [{ 
 
     name: 'TPM', 
 
     url: '#', 
 
     valueSub: 11, 
 
     tValue: 13 
 
    }, { 
 
     name: 'Pollster', 
 
     url: '#', 
 
     valueSub: 23, 
 
     tValue: 45 
 
    }] 
 

 
    }]; 
 
    
 
    
 
    $scope.onChnage = function(value,test){ 
 
    console.log(test) 
 
    if(value.model=='index'){ 
 
     $scope.indexonClick(test) 
 
    } else if(value.model=='aggs'){ 
 
     $scope.aggsonClick(test) 
 
    } else if($scope.index==false){ 
 
     console.log('false') 
 
    } 
 
    }; 
 
    
 
    $scope.indexonClick= function(test){ 
 
    var value = (test == true ? 'clicked' : 'un clicked') 
 
    alert('index ' + value) 
 
    } 
 
    
 
    $scope.aggsonClick = function(test){ 
 
    var value = (test == true ? 'clicked' : 'un clicked') 
 
    alert('aggs ' + value) 
 
    }; 
 
});

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <table class='table'> 
 
    <thead> 
 
     <tr> 
 
      
 
     <th>name</th> 
 
     <th>itemOne</th> 
 
     <th>itemTwo</th> 
 
     <th>model</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody ng-repeat="value in tableData| orderBy:'-valueMain'"> 
 
     <tr> 
 
     
 
     <td> 
 
      <button ng-show="value.expand" ng-click='value.expand = false'>-</button> 
 
      <button ng-show="!value.expand" ng-click='value.expand = true'>+</button> 
 
      <input type="checkbox" ng-model="test" ng-change="onChnage(value,test)" class='checkbox' 
 
> 
 
      <a rel="noopener" target="_blank" href={{value.url}}> 
 
\t \t {{value.name}} 
 
\t \t </a> 
 
     </td> 
 
     <td>{{value.valueMain}}</td> 
 
     <td>{{value.tValue}}</td> 
 
     <td>{{value.model}}</td> 
 
     <tr> 
 
      <tr ng-show="value.expand" ng-repeat="subs in value.subvalues| orderBy:'-valueSub'" > 
 
      <td> 
 
       {{subs.name}} 
 
      </td> 
 
      <td> 
 
       {{subs.valueSub}} 
 
      </td> 
 
      <td> 
 
       {{subs.tValue}} 
 
      </td> 
 
       
 
      </tr> 
 
     </tr> 
 

 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</body> 
 

 
</html>

Pls run this code snippet

Here is the plunker

來源

2016-10-19 13:11:00 Sravan

@imi的選中和未選中的值，請檢查此答案並運行代碼。 – Sravan

嗨感謝您的回答我只是想爲什麼這只是運行一次？也就是當我第一次打開頁面並單擊複選框時，它會顯示akert值，但是如果我取消選中並檢查它不顯示值？ – Imi

@imi，現在檢查，答案和潛水員都會更新。 – Sravan

你需要做的是將價值傳遞到你的onChnage()函數。例如：

<input ... ng-change="onChnage(data.model)" ... />

注意，你現在提供複選框的當前值到平變化的功能。

$scope.onChnage = function(isChecked){ 
    console.log(isChecked); 

    ... 
};

來源

2016-10-19 13:01:33

謝謝你的回答我以前嘗試過這種方法，但問題是，我希望每個複選框的值檢查時，未選中，因爲我想在選中和取消選中時操作與這些複選框相對應的DOM元素 – Imi

您可以更具體地瞭解「我想操作DOM元素」嗎？ – raina77ow

supose複選框索引被點擊我顯示了一系列獨特的索引值，當它被取消選中時隱藏了系列，當複選框aggs被選中時，它顯示了聚合器獨有的系列，當它未被選中時，它隱藏了系列 – Imi

重寫你叫那麼它得到了row爲參數的函數：

... ng-change="onChange(data)" ...

...然後使用提供行作爲信息來源：

$scope.onChange = function(row){ 
    alert(row.name); // Aggregators or Index 
};

Plunkr。作爲旁註，我強烈建議使用console.log而不是alert。

來源

2016-10-19 13:02:07 raina77ow

「**作爲旁註，我強烈建議使用console.log而不是alert。**」：那麼爲什麼要使用'alert（）'？ – Mistalis

因爲它在原文中，我不知道它的作者的意圖。一般來說，是的，'console'是一個更好的僕人。 – raina77ow

@ raina77ow：但我想獲得ng-model的值，因爲我想根據複選框是否被點擊來執行另一個函數 – Imi

通過你輸入你的函數

<input type="checkbox" ng-model="data.model" 
    ng-change="onChnage(data.model)" class='checkbox'>

部分解決plunker：

https://plnkr.co/edit/aTo8FsMo5hgTGc2TM5Dx?p=preview

來源

2016-10-19 13:06:19

返回一個字符串不是真正的對象。它應該沒有大括號... –

糟糕，我錯過了它。現在糾正它。謝謝你@PoyrazYilmaz –

謝謝你pandian，但我想所有的複選框 – Imi

如何在ng-repeat中使用ng-change

回答

相關問題