AngularJS:如何防止ng-click定位子元素

时间:2016-04-21 10:09:54

标签: javascript html angularjs

我有一个树结构,其中包含一个文件夹作为父文件夹,文件作为子文件夹,但同一文件夹也可以包含另一个文件夹作为子文件夹。第一次,唯一可见的项目是可以单击以查看其文件的文件夹。

我的问题是,当我点击父文件夹时,子文件夹也会被展开,我只想查看被点击文件夹的文件。

例如(JSFIDDLE)当我点击parent folder时,我不希望child folder也展开,直到我点击它为止。

这是我的代码(不得更改代码结构):

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app>
  <div class="folder-group">
    <span class="folder-title" ng-click="openFolder=!openFolder">
      <i class="fa {{openFolder ? 'fa-chevron-down' : 'fa-chevron-right'}}"></i>
      <i class="fa fa-folder-o"></i>
      folder parent
    </span>
    <ul ng-show="openFolder">
      <li>file1</li>
      <li>file2</li>
      <li>file3</li>
      <li>file4</li>
      <li class="children-folder">
        <span class="folder-title" ng-click="openFolder=!openFolder">
          <i class="fa {{openFolder ? 'fa-chevron-down' : 'fa-chevron-right'}}"></i>
          <i class="fa fa-folder-o"></i>
          folder children
        </span>
        <ul ng-show="openFolder">
          <li>file1</li>
          <li>file2</li>
          <li>file3</li>
          <li>file4</li>
        </ul>
      </li>
    </ul>
  </div>
</div>

这是原始模板:

<span class="folder-title" ng-click="get_menu_items(folder); openFolder =! openFolder;">
    <i class="fa {{openFolder ? 'fa-chevron-down' : 'fa-chevron-right'}}"></i>
    <i class="fa fa-folder-o"></i>
    {{ folder.name }}
</span>
<ul ng-show="openFolder">
    <li class="item" ng-repeat="file in folder.files">
        <label>
            <input class='file-list-item' type="checkbox" name="file_map[]" value="{{ file.id }}" ng-model="file_map[file.id]" ng-click="update_selection($event)" />
            <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>


scope.get_menu_items = function(folder) {
    folders_service.get_sub_folders(folder, false, function(folders, files) {
    }, function(err, status) {
        scope.handle_top_level_errors(err, status);
    });
}

1 个答案:

答案 0 :(得分:0)

只需重命名ng-click for children文件夹

#include <iostream>
#include <iomanip>
#include <fstream>
using namespace std;
using std::setw;

int main(){
    float avg;
    int over,maiden,runs,wickets;
    ifstream scores;
    scores.open("scores.txt");
    if(!scores){
        cout<<"Error \n";
        return -1;
    }

    ofstream average("average.txt");
    if(!average){
        cout<<"Error \n";
        return -1;
    }

    average << "Bowler"<<"\t"<<"Average"<<endl;
    int i=1;
    //scores >> over >> maiden >> runs >> wickets;
    while(!scores.eof()){
        scores >> over >> maiden >> runs >> wickets;
        avg = runs/float(wickets);
        if(wickets == 0){
            average<<i<<"\t"<<"NA"<<endl;
        }else{
            //avg = runs/float(wickets);
            average << i<<"\t"<<avg<<endl;

        }
        i++;
    }
    scores.close();
    average.close();
    return 0;
}

编辑2:

在您的文件夹功能中,

您需要添加 <li class="children-folder"> <span class="folder-title" ng-click="openFolder2=!openFolder2"> <i class="fa {{openFolder2 ? 'fa-chevron-down' : 'fa-chevron-right'}}"></i> <i class="fa fa-folder-o"></i> folder children </span> <ul ng-show="openFolder2"> <li>file1</li> <li>file2</li> <li>file3</li> <li>file4</li> </ul> </li> 以及_{{$index+1}}名称以及循环,其名称将显示为openFolder_1,openFolder_2 ..我无法使用上述细节确定您的功能

以下仅供参考。

openFolder

结果

<li ng-repeat="name in names">{{openFolder}}_{{$index+1}}</li>