AngularJS学习-(左侧导航栏筛选、input输入框筛选)

最新推荐文章于 2021-09-04 10:31:15 发布

Take_Dream

最新推荐文章于 2021-09-04 10:31:15 发布

阅读量5.7k

点赞数

分类专栏： angular

本文链接：https://blog.csdn.net/Take_Dream_as_Horse/article/details/51434228

版权

本文介绍了如何使用AngularJS实现页面左侧导航栏和输入框的筛选功能。通过HTML布局和JS逻辑，实现了动态过滤内容，为用户提供了便捷的交互体验。

摘要由CSDN通过智能技术生成

1、HTML代码

<body ng-controller="showProduct">
<!-- 左侧导航栏 -->
    <div class="nav-list" >
        <a ng-click="clickNav()">首页</a>
        <a ng-repeat="nav in navList" ng-click="clickNav(nav.classify)" ng-class="focusNav(nav.classify)">{
  {nav.classify}}</a>
    </div>
<!-- 右侧显示表单内容 -->
    <div class="tab-cont">
        <!-- 表单输入过滤 -->
        <input type="text" placeholder="输入关键字搜索" ng-model="selt"/>
        <!-- 循环出商品详细信息 -->
        <div class="tab" ng-repeat="product in productDetail | filter:filterNav | filter:selt">
                <h3>{
  {product.name}}</h3>
                <p>{
  {product.describe}}</p>
                <h4>{
  {product.price | currency: