Question

我有一张表格，我使用ng-repeat来复制一系列4个复选框。当用户选择后续表行中的“OAuth2”复选框之一时，我需要显示表格外的div。我尝试过使用ng-model =“OAuth2”然后使用ng-show =“OAuth2”作为表格之外的div，但它不起作用。（如果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)

Angularjs ng-repeat hide / show

1 个答案: