Auf Überprüfung Kontrollkästchen, das Kind Objekt Angular Js

Question

Ich will dir ein Szenario, in dem erreichen, wenn i TV1 Radiobutton klicken i1 alle seine Kinder in dem Objekt das heißt Product TV1, Anzahl der Kanäle erhalten möchten . Unten ist mein Code

Markup:

<div ng-repeat="product in ProductTypes">   
    <div ng-show="product.selected" ng-repeat="Product in product.ProductList"> 
     <label> 
      <input type="radio" name="internetProduct{{$parent.$index}}" 
       ng-model="Product" ng-value="{{Product}}" ng-click="GetValue()" /> 
      {{Product.ProductName}} 
     </label> 

     <table> 
     <tr ng-repeat="(key, val) in Product"> 
      <td>{{key}}</td> 
      <td>{{val}}</td> 
     </tr> 
     </table> 

    </div> 
</div> 

Controller (js):

var app = angular.module('ProductCatalog.controllers', ['ui.bootstrap']) 
.controller('OfferCtrlr', function ($scope, $http, $modal) { 
     $scope.GetValue = function() { 
     var a = $scope.radio; 
    } 
}) 

Gerade jetzt, nichts in $ scope.radio kommt. Bitte helpp.

Answer 1

Sie können die Produktinstanz als Parameter an Ihren ng-click-Funktionsaufruf übergeben. Wenn Sie auf das Optionsfeld klicken, wird die entsprechende Produktinstanz in Ihrer Funktion verfügbar sein. Der folgende Code gibt Ihnen die Instanz für Optionsfeld. Machen Sie dasselbe für Checkbox, rufen Sie eine Funktion bei der Kontrolle und die entsprechende Instanz übergeben (Sie haben nicht das Markup für Checkbox zur Verfügung gestellt)

HTML.

<div ng-repeat="product in ProductTypes">   
    <div ng-show="product.selected" ng-repeat="Product in product.ProductList"> 
     <label> 
      <input type="radio" name="internetProduct{{$parent.$index}}" 
       ng-model="checked" ng-value="Product" ng-click="GetValue(Product)" /> 
      {{Product.ProductName}} 
     </label> 

     <table> 
     <tr ng-repeat="(key, val) in Product"> 
      <td>{{key}}</td> 
      <td>{{val}}</td> 
     </tr> 
     </table> 

    </div> 
</div> 

JS:

var app = angular.module('ProductCatalog.controllers', ['ui.bootstrap']) 
.controller('OfferCtrlr', function ($scope, $http, $modal) { 
     $scope.GetValue = function(product) { 
     console.log(product); 
    } 
}) 

Answer 2

Nun, Laden Sie alle übergeordneten und untergeordneten Objekte dann zeigen/verstecken durch die AngularJS, durch die Sie Ihr Szenario erreichen werden.