Angularjs ng-repeat hide/show

Question

我有一个表格，我正在使用ng-repeat复制一系列4个复选框。当用户在后续表格行中选择其中一个“OAuth2”复选框时，我需要显示表格外部的div。我尝试过使用ng-model =“OAuth2”，然后在表格外使用ng-show =“OAuth2”，但它不起作用。 （它工作正常，如果div在表格内），

//Here's the HTML 
<table class="table table-striped" width="100%" border="0"> 
     <thead align="center"> 
      <tr align="center"> 
      <th width="15%">Environment</th> 
      <th width="16%">Datacenter 1</th> 
      <th width="16%">Datacenter 2</th> 
      <th colspan="2">Auth Protocol</th> 
      <th colspan="2">socketTimeout</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="route in routes"> 
      <td><select class="form-control" ng-model="route.environ" > 
       <option>E2E</option> 
       <option>PERF</option> 
       <option>PROD</option> 
       <option>STAGE</option> 
       <option>PDS</option> 
       <option>QAL</option> 
       </select></td> 
      <td><select ng-model="myDataCenter1"> 
       <option ng-repeat="datacenter1 in datacenter1s" value="{{datacenter1.value}}" ng-selected="datacenter1.value == myDataCenter1">{{datacenter1.name}}</option> 
       </select></td> 
      <td><select ng-model="myDataCenter2"> 
       <option ng-repeat="datacenter2 in datacenter2s" value="{{datacenter2.value}}" ng-selected="datacenter2.value == myDataCenter2">{{datacenter2.name}}</option> 
       </select></td> 
      <td width="16%"><div class="checkbox"> 
       <label> 
        <input type="checkbox" value=""> 
        <small> PrivateAuth</small></label> 
       </div> 
       <div class="checkbox"> 
       <label> 
        <input type="checkbox" value=""> 
        <small> BrowserAuth</small></label> 
       </div></td> 
      <td width="12%"><div class="checkbox"> 
       <label> 
        <input type="checkbox" value=""> 
        <small> SimpleAuth</small></label> 
       </div> 
       <div class="checkbox"> 
       <label> 
        <input type="checkbox" value="" ng-model="OAuth2"> 
        <small> OAuth2</small></label> 
       </div></td> 
      <td width="10%"><input class="form-control" type="text" value="5"/></td> 
      <td width="13%">secs</td> 
      <td width="2%"><a href="javascript:void(0);" ng-click="removeRoute(route)">X</a></td> 
      </tr> 
      <tr> 
      <td colspan="8" align="right"><a href="javascript:void(0);" ng-click="addRoute()">+ ADD MORE</a></td> 
      </tr> 
     </tbody> 
     </table> 
     <div ng-show="OAuth2">Show this content</div> 



    //Here's the JavaScript 
    /* ROUTES - Datacenter section to populate table and add remove routes */ 
    $scope.routes = [ 
     {environ:'E2E', data1:'',data2:'',auth:'',socket:''}, 
     {environ:'PERF', data1:'',data2:'',auth:'',socket:''}, 
     {environ:'PROD', data1:'',data2:'',auth:'',socket:''} 
    ]; 

    $scope.addRoute = function() { 
     this.routes.push({environ:'', data1:'',data2:'',auth:'',socket:''}); 
    }; 

    $scope.removeRoute = function(routeToRemove) { 
     var index = this.routes.indexOf(routeToRemove); 
     this.routes.splice(index, 1); 
    }; 

Answer 1

ng-repeat创建子范围。当您设置值checked时，该值仅存在于子范围内，并且您无法在外面看到它。在您的父作用域中创建一个名为data的对象或其他东西，并使用data.checked作为您的值。数据对象将由子作用域继承，您可以在父对象中使用该值。

如果只是用checked父范围它将继承，但只要你的孩子范围设置的值它打破了继承(fiddle)