Suche Checkbox von TD der Reihentabelle mit angularJS (IE vs Chrome)

-1

Ich kämpfe unter Szenario Tabelle-> Zeile-> td -> Checkbox mit ng-Modell funktioniert gut in Chrome, aber es funktioniert nicht in IE.Suche Checkbox von TD der Reihentabelle mit angularJS (IE vs Chrome)

Wenn ich ng-Modell aus Checkbox entferne dann funktioniert es auch in IE, aber ich ng-Modell

muß ich tun habe Chrome-Version: 49.0.2623.87 IE Version: 11.0.20 (KB3058515)

angular.module('myApp', []) 
 
    .controller('ctrl', function($scope) { 
 
    $scope.objList = [{ 
 
     description: 'a' 
 
    }, { 
 
     description: 'b' 
 
    }, { 
 
     description: 'c' 
 
    }, { 
 
     description: 'd' 
 
    }]; 
 

 
    $scope.toggleObjSelection = function($event, description) { 
 
     // $event.stopPropagation(); 
 
     alert('checkbox clicked'); 
 

 
    } 
 

 
    $scope.rowClicked = function(obj) { 
 
     alert('row clicked'); 
 

 
     $("table tr").each(function() { 
 

 
     $(this).find("td:first input[type=checkbox]").attr("checked", true); 
 

 
     }); 
 

 
    }; 
 
    });

<head> 
 
    <script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script> 
 
    <script data-require="[email protected]" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <div ng-app="myApp"> 
 
    <table ng-controller="ctrl"> 
 
     <tbody> 
 
     <tr ng-click="rowClicked(obj)" ng-repeat="obj in objList"> 
 
      <td> 
 
      <input type="checkbox" ng-model="selectedObjs" /> 
 

 
      </td> 
 
      <td> 
 
      {{obj.description}} 
 
      </td> 
 

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

Klicken Sie auf einen beliebigen Buchstaben und alle Kontrollkästchen sollten überprüft werden. (Chrome fein, aber IE funktioniert nicht)

Quelle

2016-03-25 FShah

Sie sollten das ng-Modell-Attribut auf der Checkbox zu obj.selected ändern und dann dieses Attribut auf True setzen, wenn auf die Zeile geklickt wird. Werden Sie jQuery los und benutzen Sie einfach Angular.

Sie möchten, dass jedes Individuum obj ein Attribut von selected hat und nicht nur ein Attribut in $ scope.

angular.module('myApp', []) 
    .controller('ctrl', function($scope) { 
    $scope.objList = [{ 
     description: 'a' 
    }, { 
     description: 'b' 
    }, { 
     description: 'c' 
    }, { 
     description: 'd' 
    }]; 

    $scope.toggleObjSelection = function($event, description) { 
     // $event.stopPropagation(); 
     alert('checkbox clicked'); 

    } 

    $scope.rowClicked = function(obj) { 
     alert('row clicked'); 
     obj.selected = true; 
     }); 

    }; 
    });

Und dann die aktualisierte html

<body> 
    <div ng-app="myApp"> 
    <table ng-controller="ctrl"> 
     <tbody> 
     <tr ng-click="rowClicked(obj)" ng-repeat="obj in objList"> 
      <td> 
      <input type="checkbox" ng-model="obj.selected" /> 

      </td> 
      <td> 
      {{obj.description}} 
      </td> 

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

Quelle

2016-03-25 17:15:02 jgraft

Jfraft, Vielen Dank für Ihre Antwort, aber ich wissen müssen, wie in diesem Fall td mit Kontrollkästchen zu finden, ich hatte soeben erstellte Prototyp So kann ich nicht ändern diese Anforderung, um Checkbox unter td von tr mit ng-model und ng-change zu finden – FShah

Was werden Sie damit machen, wenn Sie es finden? Letztendlich sollten Sie zuerst Angular und dann jQuery verwenden. Wenn Sie wirklich wollen, greifen Sie auf das $ -Ereignisobjekt https://docs.angularjs.org/api/ng/directive/ngClick zu – jgraft

Suche Checkbox von TD der Reihentabelle mit angularJS (IE vs Chrome)

Antwort

Verwandte Themen