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

Question

我試圖每次單擊復選框時在ng-change內部執行一個函數。 我需要獲取模型的值，或者以某種方式知道單擊了哪個復選框，以便可以調用另一個對應的函數作為選中的值，以及何時取消單擊該復選框的時間，以便可以隱藏某些值

不知道我使用的方法是否正確，但這是我的代碼： plunker

HTML

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

JS

$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!');
};

Answer 1

重寫您調用的函數，以便將其row作為參數：

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

...然后使用提供的行作為信息源：

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

Plunkr 。 作為附帶說明，我強烈建議您使用console.log而不是alert 。

Answer 2

請檢查此代碼，

 // 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="angular.js@1.3.x" 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}}> {{value.name}} </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

這是the子

Answer 3

您需要做的就是將值傳遞到onChnage()函數中。 例如：

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

請注意，您現在正在向onchange函數提供checkbox的當前值 。

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

    ...
};

Answer 4

將您的輸入傳遞給函數

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

部分解決了punker：

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

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

問題描述

4 個解決方案

解決方案1
2 2016-10-19 13:02:07

解決方案2
2 已采納 2016-10-19 13:11:00

解決方案3
1 2016-10-19 13:01:33

解決方案4
1 2016-10-19 13:06:19

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

問題描述

4 個解決方案

解決方案1 2 2016-10-19 13:02:07

解決方案2 2 已采納 2016-10-19 13:11:00

解決方案3 1 2016-10-19 13:01:33

解決方案4 1 2016-10-19 13:06:19

解決方案1
2 2016-10-19 13:02:07

解決方案2
2 已采納 2016-10-19 13:11:00

解決方案3
1 2016-10-19 13:01:33

解決方案4
1 2016-10-19 13:06:19