javascript - AngularJS:如何从 Controller 切换元素

Question

如何使用以下 Controller 来切换 li 标签内的内容？现在，仅在单击该跨度后才会呈现内容，但如果我再次单击该跨度，它不会隐藏。

这是我的代码:

<span ng-click="get_menu_items(folder)>
  <i class="fa fa-folder-o"></i>
  {{ folder.name }}
</span>
<ul>
    <li class="item" ng-repeat="file in folder.files">
      <label>
        <input type="checkbox" name="file_map[]" value="{{ file.id }}"  ng-model="file_map[file.id]" ng-click="update_selection(file.id)"/>
        <i class="fa fa-file-o"></i>
        <span>{{ file.name }}</span>
      </label>
    </li>
    <li menuitem ng-repeat="folder in folder.folders" ng-model="folder"></li>
</ul>

Controller :

scope.get_menu_items = function(folder){
    http.get("/api/folders/" + folder.id).success(function(data){
        folder.folders = data.data.folders;
        folder.files= data.data.files;
    })
}

Answer 1

您可以简单地创建一个用于显示/隐藏的 bool 值，并在您的点击方法上切换它，例如。

scope.get_menu_items = function(folder){
   //if folder.folder exist means we don't need to make $http req again
   if(folder.folders){
      $scope.showFolder = !$scope.showFolder
   }
   else{
      http.get("/api/folders/" + folder.id).success(function(data){
       folder.folders = data.data.folders;
       folder.files= data.data.files;
       $scope.showFolder = true;
      })
   }
}

并在您的 View 中添加ng-if。

<span ng-click="get_menu_items(folder)>
  <i class="fa fa-folder-o"></i>
  {{ folder.name }}
</span>
<ul ng-if="showFolder">
    <li class="item" ng-repeat="file in folder.files">
      <label>
        <input type="checkbox" name="file_map[]" value="{{ file.id }}"  ng-model="file_map[file.id]" ng-click="update_selection(file.id)"/>
        <i class="fa fa-file-o"></i>
        <span>{{ file.name }}</span>
      </label>
    </li>
    <li menuitem ng-repeat="folder in folder.folders" ng-model="folder"></li>
</ul>

希望有帮助。