Question

我正在尝试开发具有搜索功能的操作栏。

演示：http://plnkr.co/edit/lWoHw7Aiwacln4GAHfNm?p=preview

在没有任何搜索查询的情况下选择/取消选择文件时，操作栏会更新;但是，我现在想在输入搜索查询后将操作栏绑定到过滤结果。

例如：

选择文件A （注意：删除和打开操作已添加）
在搜索输入中输入 a 。（错误：由于过滤结果中只有一个项目，我希望selectState更改为 all 。这将导致 Select All 被取消选择取消选择所有。）
从搜索输入中删除 a 。（另一个错误：此时请注意selectState更改为 all 。现在全部选择被取消全部替换，但这是错误的，因为已过滤结果现在有更多元素，我们没有选择所有内容。）

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.compat.min.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="FilesCtrl">
    <h1>Search + Bar</h1>
    <input ng-change="updateSelectState()" ng-model="search" type="text" placeholder="search" />

    <div class="files_bar">
       <ul>
         <li ng-show="selectState == 'none' || selectState == 'one' || selectState == 'multiple'" ng-click="selectAll()">
           <span>Select All</span>
         </li>
         <li ng-show="selectState == 'all'" ng-click="deselectAll()">
           <span>Deselect All</span>
         </li>
         <li ng-show="selectState == 'one' || selectState == 'multiple' || selectState == 'all'" ng-click="confirmView()">
           <span>Delete</span>
         </li>
         <li ng-show="selectState == 'one'">
           <span>Open</span>
         </li>
       </ul>
      </div>

      <div class="files">
        <div class="file" ng-repeat="file in filteredFiles = ( files | filter:{ name: search })">
          <input type="checkbox" ng-checked="file.checked" ng-click="toggleFileSelect(file)">
          {{file.name}}
        </div>

        <div ng-if="filteredFiles.length == 0">
          <h4>No file found.</h4>
        </div>
      </div>
    </div>  
  </body>

</html>

如何使用Angular将过滤结果绑定到另一个动作？

0 个答案: