智能表st-search不起作用

Question

我已通过<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="box"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, consectetur.</p> <p>Sequi alias debitis quos provident tenetur quis non odio. Voluptatum.</p> <p>Illum reprehenderit ducimus delectus. Totam maxime harum, ratione eligendi aut.</p> <p>Mollitia iusto enim eveniet corporis obcaecati. Veritatis quia velit perspiciatis.</p> <p>Eveniet repudiandae sed ipsa eos, tempora quidem sit ipsam non.</p> </div> <div class="main"> <h3>Hello!</h3> <a href="#" id="activator">Activate!</a> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis sequi vitae deleniti commodi hic recusandae officia et unde nesciunt beatae eos sit obcaecati, fuga sapiente expedita aliquam, atque minima. Doloremque.</p> <p>Eligendi illo molestiae, consequatur, temporibus quos repellat quod quasi nemo quibusdam deleniti sapiente cum similique sequi. Optio voluptates eius vel cupiditate quidem sunt maiores nesciunt doloribus. Maiores nam aliquam molestiae!</p> <p>Iure illo qui iusto minima. Accusamus veritatis quas similique, magnam fugiat provident quam officiis qui deserunt, eveniet non. Voluptas quaerat nobis sequi ex repellendus ea, quibusdam dolorem ipsam. Beatae, neque.</p> <p>Esse deserunt recusandae assumenda dolorem, perferendis magni nostrum atque, cumque. Ex molestiae exercitationem ipsa ullam porro delectus minima, quos sunt eveniet iure eaque ut a, nam ea! Officiis, dolorum, optio.</p> <p>Eius debitis voluptatum molestiae cumque cupiditate, reprehenderit reiciendis consequatur similique autem commodi necessitatibus corporis voluptatem eaque officia animi pariatur optio dolores voluptates ipsa amet molestias illum. Eveniet molestiae laboriosam, ipsum.</p> <p>Corporis ad fugiat nostrum architecto deserunt, voluptatum et facilis suscipit eaque eligendi qui consectetur veritatis possimus id dolorum porro provident, repellendus magnam! Magnam ullam autem laborum accusamus nobis ipsa, sunt.</p> <p>Cumque nihil laboriosam suscipit corrupti unde quos inventore, corporis odit esse accusantium tempore ea saepe asperiores vero quam eligendi veniam harum. Ex in vel tempora ipsa consectetur fuga amet esse.</p> <p>Sequi, nobis, pariatur autem omnis consectetur voluptatibus nulla? Ea ratione enim rerum nihil. Hic quidem commodi itaque, quam optio minus accusantium possimus repellat, accusamus error illum omnis, dolorem esse dolore.</p> <p>Sint quam doloremque vel error, dolorem repudiandae natus aliquid et dolorum esse tenetur commodi quis? Ipsa adipisci eveniet error. Quos veniam minus, ipsam id porro perspiciatis consequatur adipisci magni molestias!</p> <p>Explicabo ut maiores animi iusto fuga maxime amet saepe exercitationem debitis quos harum quis eaque repellendus modi odio, consectetur quibusdam tempore aspernatur vel dolores similique labore sapiente, incidunt. Illum, aperiam.</p> <p>Aliquid temporibus quia error voluptatum, asperiores perferendis ex sed quam delectus assumenda veritatis repellendus exercitationem id doloremque fugit soluta fuga veniam, totam enim, libero quidem deserunt eveniet culpa harum. Mollitia.</p> <p>Eos assumenda unde, modi. Necessitatibus porro, tempore distinctio eaque quos doloribus accusantium quaerat molestiae mollitia id. Unde, minima, sapiente error, vero quod soluta excepturi illum eligendi sequi aspernatur dolorum. Vero.</p> <p>Doloribus natus odit, asperiores pariatur placeat nam mollitia! Eaque sapiente quos, dolorem minus eius vero dicta laboriosam, odit accusamus quae blanditiis nihil accusantium modi reprehenderit quibusdam excepturi. Illum, repellendus, fuga.</p> <p>Facilis, maxime magni impedit voluptatem atque illo explicabo dolorum iure eius laudantium maiores minima sit possimus vitae aut quibusdam hic nemo, nesciunt delectus repellat. Ab tempora similique delectus amet quos.</p> <p>Alias aut saepe eaque sapiente velit soluta commodi, aspernatur maxime cumque qui rerum et modi distinctio temporibus molestiae, quae voluptatem nobis esse ipsa, recusandae. Soluta sint quae qui architecto odit!</p> <p>Accusantium quam perferendis aperiam, unde? Sunt cumque, quod non reiciendis, possimus laborum. Quod corporis aperiam alias laudantium facere tempora iure, consequatur corrupti fuga nobis nostrum vel voluptates ut consequuntur iste!</p> <p>Cum rerum dignissimos voluptates assumenda enim doloremque quidem ipsum iusto quaerat ex amet magnam ab nam adipisci consectetur perspiciatis eveniet fuga quae debitis, quibusdam at neque! Voluptates quaerat cumque labore.</p> <p>Omnis, labore aspernatur provident deleniti aliquid quasi accusamus mollitia eveniet consequatur voluptatum eligendi officiis perspiciatis ut praesentium delectus, modi eum magnam odio! Dolores quod porro nesciunt, sint quis iure nulla!</p> <p>Exercitationem earum enim autem, adipisci temporibus rem itaque beatae quidem est nesciunt hic eligendi molestias, ea repellendus. Necessitatibus possimus deleniti blanditiis molestiae nihil minus ducimus veniam tempora commodi incidunt, labore!</p> <p>Consequuntur, laboriosam praesentium temporibus sunt illo atque minus et neque, cumque minima natus ducimus velit. Cumque ab expedita fugiat libero eaque aut laudantium consequatur voluptatibus error similique. Blanditiis, sapiente fuga.</p> <p>Voluptas quo quidem minus sint aperiam culpa nulla debitis commodi et id explicabo amet vitae, illo optio deserunt recusandae ducimus harum adipisci, quam repudiandae blanditiis in aliquam. Modi, numquam, magnam!</p> <p>Iure nulla neque quis officiis, blanditiis sit autem nobis laboriosam ex! Fuga praesentium reiciendis harum excepturi doloribus suscipit, accusantium iste eligendi nobis, adipisci eveniet illum quibusdam placeat nihil quaerat, maiores!</p> <p>Eos sed ex, eveniet totam enim consequuntur molestias nobis quia tempora eaque rem atque veritatis suscipit vero ratione. Ducimus autem perferendis iusto, rerum molestias deserunt omnis, laborum harum reiciendis commodi.</p> <p>Dicta quae mollitia accusantium voluptate vitae modi illum, alias, quam provident dolores consequuntur. Incidunt quaerat tempore nulla voluptatem voluptates eos culpa ab a officia, earum optio sit dicta, neque magni.</p> <p>Vitae deleniti voluptatibus eveniet doloremque tenetur odit quasi magnam, mollitia, fugiat, numquam sapiente autem delectus distinctio possimus et hic, sint provident error iste. Perferendis quisquam ullam repellat debitis possimus non.</p> <p>Ad dolore possimus rem suscipit sit ullam deserunt itaque quisquam impedit veritatis voluptates atque facilis, quos iure rerum mollitia cumque dicta inventore commodi, soluta minus modi. Accusantium reiciendis neque quidem.</p> <p>At quo, impedit ut expedita dolor necessitatibus quibusdam laborum quidem animi non est inventore dolorum sunt unde odit eos error itaque esse excepturi perferendis explicabo reiciendis! Unde quo consectetur molestias.</p> <p>Quidem quas doloremque nisi corporis error omnis vitae odio, qui et maiores eius illum culpa enim aliquam, placeat asperiores, aperiam ea molestias rerum, amet. Facere quia, iure quidem! Ad, nihil.</p> <p>Vero laborum, sint dolores accusantium placeat, quis asperiores adipisci sit, vitae possimus quae. Blanditiis non asperiores modi, nemo cupiditate autem voluptas! Suscipit consectetur vel aperiam error, quam ea, corporis atque!</p> <p>Soluta ipsum, quasi, tenetur nam dolorem iste vel. Velit tempora esse, soluta. Quisquam impedit deserunt culpa cum, explicabo perspiciatis fugiat maxime ex. Distinctio mollitia perferendis ut quos porro, eos. Eius.</p> </div>在我的页面中实现了智能表格，而ng-include无效。这是我的代码：

表格

st-search

然后我从rest应用程序获取数据，这是我的控制器：

 <div class="horizontal-scroll" ng-controller="SmartTableController">
  <div class="form-group select-page-size-wrap ">
    <label>Rows on page
      <select class="form-control selectpicker show-tick" title="Rows on page" selectpicker
              ng-model="smartTablePageSize" ng-options="i for i in [5,10,15,20,25]">
      </select>
    </label>
  </div>
  <table class="table" st-table="displayedData" st-safe-src="smartTableData" >
    <thead>
    <tr class="sortable ">
      <th class="table-id" st-sort="id" st-sort-default="true">#</th>
      <th st-sort="firstname">Prénom</th>
      <th st-sort="lastname">Nom</th>
      <th st-sort="role">Rôle</th>
      <th st-sort="email">Email</th>
      <th st-sort="chargeRate">Taux de charge</th>
    </tr>
    <tr>
      <th></th>
      <th><input st-search="firstname" placeholder="Chercher Prénom" class="input-sm form-control search-input"
                 type="search"/></th>
      <th><input st-search="lastname" placeholder="Chercher Nom" class="input-sm form-control search-input"
                 type="search"/></th>
      <th><input st-search="role" placeholder="Chercher Rôle" class="input-sm form-control search-input"
                 type="search"/></th>
      <th><input st-search="email" placeholder="Chercher Email" class="input-sm form-control search-input" type="search"/>
      </th>
      <th><input st-search="chargeRate" placeholder="Chercher Taux de charge" class="input-sm form-control search-input" type="search"/>
      </th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in displayedData">
      <td class="table-id">{{item.id}}</td>
      <td>{{item.firstname}}</td>
      <td>{{item.lastname}}</td>
      <td>{{item.role[0].name}}</td>
      <td><a class="email-link" ng-href="mailto:{{item.email}}">{{item.email}}</a></td>
      <td>{{item.chargeRate}}</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
      <td colspan="6" class="text-center">
        <div st-pagination="" st-items-by-page="smartTablePageSize" st-displayed-pages="5"></div>
      </td>
    </tr>
    </tfoot>
  </table>
</div>

我的服务工作正常，我收到的数据加上它确实显示在桌面上，我无法搜索。

任何帮助将不胜感激。感谢

Answer 1

我试过了。结论你的代码可能发生$ http错误而不是智能表一。 JSFiddle 我在使用这些JSON数据时可以过滤除“角色”列以外的所有列。

   $scope.smartTableData =
        [
        { firstname: 1, lastname: 'aaaa', role: [{ name: 'employee1' }], chargeRate: 10, email: 'aaaa@' },
        { firstname: 2, lastname: 'bbbb', role: [{ name: 'employee2' }], chargeRate: 20, email: 'bbbb@' },
        { firstname: 3, lastname: 'cccc', role: [{ name: 'employee3' }], chargeRate: 30, email: 'cccc@' },
        { firstname: 4, lastname: 'dddd', role: [{ name: 'employee4' }], chargeRate: 40, email: 'dddd@' }
        ];

请确认您的数据是否是正确的JSON格式。

在“角色”列中，您应该这样编码。
好的<input st-search="role.name"
NG <input st-search="role"

我认为你不需要编写这部分代码，因为这是不必要的。

   $scope.displayedData = angular.copy($scope.smartTableData);
   $scope.displayedData = $scope.smartTableData;