angularJs学习——图书列表（一）：使用本地js文件数据源

来源：互联网发布：律所知乎编辑：程序博客网时间：2024/06/10 14:21

显示图书列表

前端使用angularJs框架和underscoreJs，所以提前下载好angular.min.js和underscore.min.js放入当前目录的javascripts文件夹中。

在当前目录下，新建一个html文件，代码如下：

<!DOCTYPE html><html ng-app="myAPP">  <head>    <meta charset="utf-8">    <title>fake douban</title>    <link rel="stylesheet" type="text/css" href="css/bookstyle.css" media="all"/>            <script type="text/javascript" src="javascripts/angular.min.js"></script>    <script type="text/javascript" src="javascripts/underscore.min.js"></script>    <script type="text/javascript" src="javascripts/data.js"></script>    <script type="text/javascript" src="javascripts/app.js"></script>    <link rel="stylesheet" href="css/app.css" media="screen" title="no title" charset="utf-8">  </head>  <body ng-controller="mainController">  <div class="nav"><img class="logo" src="img/icon.jpg" />        <div class="nav-items" value="2">        <ul value="1">        <li class="items"  value="儿童文学">儿童文学</li>        <li class="items" value="小说">小说</li>        <li class="items" value="原文">原文</li>        <li class="items" value="教材">教材</li>        <li class="items" value="生活">生活</li>        </ul>                </div>        <div class='nav-search'>        <div ng-controller="SelectCtrl">        <select ng-model="selectedTip"  ng-options="obj.name for obj in selecttip"></select>                <input type ="text" id="nav-search-content" ng-model="searchContent" placeholder="搜索标签或出版社" />             <button id='nav-search-btn' ng-click="searchbook(selectedTip,searchContent)">搜索</button>         </div>    </div>    <div id='books'>      <h1 id="tag-title">关于儿童文学的书 (豆瓣)</h1>            <ul class="book-list">        <div class="book" ng-repeat="book in books">      <li>          <div class="book-img-part"><img src="{{book.images.small}}" alt="{{book.title}}" /></div>          <div class="book-description-part">            <h4 class='bookname' data-detail="{{book.url}}">{{book.title}}</h4>            <div class='book-info'>            <p class="authors"><span class="author" ng-repeat="author in book.author">{{author}}/</span></p>            <p class="price"><span>{{book.price}}</span>起</p>            <span class='publisher' >{{book.publisher}}</span><span class='pubdate' >{{book.pubdate}}</span></div>            <p class="tags"><span class=tag ng-repeat="tag in book.tags">{{tag.name}}  </span></p>          </div>        </li>      </div>    </ul>         <br />        <button class='load-more'>加载更多</button>        <div id="top" ng-click="topclick()">顶部</top></div>  </body></html>

格式的css文件就不放代码了，随意编写，简洁美观就好。

存放数据的data.js里存入书籍的数据，如下（只放了一本书的数据）：

(function(window){  var books = [    {      "rating": {        "max": 10,        "numRaters": 34,        "average": "7.0",        "min": 0      },      "subtitle": "中国现代经典美文书系",      "author": [        "陈子善,蔡翔"      ],      "pubdate": "2007-7",      "tags": [        {          "count": 16,          "name": "散文",          "title": "散文"        },        {          "count": 3,          "name": "风",          "title": "风"        },        {          "count": 3,          "name": "中国",          "title": "中国"        },        {          "count": 2,          "name": "当代",          "title": "当代"        },        {          "count": 2,          "name": "中国现代文学",          "title": "中国现代文学"        },        {          "count": 1,          "name": "其它小說",          "title": "其它小說"        },        {          "count": 1,          "name": "经典",          "title": "经典"        },        {          "count": 1,          "name": "纯净",          "title": "纯净"        }      ],      "origin_title": "",      "image": "https://img1.doubanio.com/mpic/s26675553.jpg",      "binding": "",      "translator": [],      "catalog": "",      "pages": "206",      "images": {        "small": "https://img1.doubanio.com/spic/s26675553.jpg",        "large": "https://img1.doubanio.com/lpic/s26675553.jpg",        "medium": "https://img1.doubanio.com/mpic/s26675553.jpg"      },      "alt": "http://book.douban.com/subject/2270869/",      "id": "2270869",      "publisher": "人民文学出版社",      "isbn10": "7020061125",      "isbn13": "9787020061129",      "title": "风",      "url": "http://api.douban.com/v2/book/2270869",      "alt_title": "",      "author_intro": "目录 ：\n风的话\n风\n风\n风雨（节选）\n风雨\n自然风\n风的青睐\n……",      "summary": "《风》系由陈子善、蔡翔主编，中国现代名家经典作品中攫取精华篇目，按主题分为：《春》、《夏》、《秋》、《冬》、《风》、《花》、《雪》、《月》，囊括了鲁迅、茅盾、郭沫若、老舍、郁达夫、朱自清、林语堂、梁遇春、冰心、张爱玲、张恨水等诸多现当代散文大家的经典名作，咀英啜华，从一个全新的角度对中国现代散文名篇进行一次整体的梳理和分类。",      "series": {        "id": "1122",        "title": "中国现代经典美文书系"      },      "price": "15.00元"    }];  window.data = {    books : books  }})(window);

以上的数据可以直接在豆瓣api中下载某一本书的详细数据。

重点是app.js文件，其中包含使用angularJs的方法：

(function(angular, data, _){  var myAPP = angular.module('myAPP', []);    myAPP.controller('mainController', function($scope ) {      $scope.books = data.books;    $scope.selectedTip = "出版社";   $scope.searchbook = function(selectedTip,searchContent){          $scope.books =_.filter(data.books, function(onebook){ //过滤器     if(selectedTip.name == "出版社")     return  onebook.publisher == searchContent;//选择与输入内容一致的出版社，此类书籍作为返回值，可以显示在页面上          if(selectedTip.name  == "标签"){     var tagif=_.some(onebook.tags, function(tagg){ return tagg.name == searchContent; });//some是在数组中只要符合一项就返回true，该值用来判断该本书是否符合要求，即是否存在输入框输入的标签     if(tagif)     return onebook;     }          });   }     });  myAPP.controller("SelectCtrl", function($scope){    $scope.selecttip = [                    {                        id: 0,                        name: '标签',                    },                    {                        id: 1,                        name: '出版社',                    }                ];});})(angular, data, _);

其中包含了两个控制器，SelectCtrl是页面上的下拉选框的内容，可以任意添加多个，当然要根据功能需求来。

在MainController控制器中，需要获取前端页面的下拉框的值以及输入框input的值，在angular中已经通过model双向绑定，所以可以直接获取，反复尝试输出，发现如何都无法直接通过$scope.selectedTip这种形式获取html页面的值，所以就在button中的click方法设置中，作为参数传值，这样在js代码中可以读取到输入的值，不过这种方法貌似不可取，以后找到更好的办法再补充。

以上的例子比较简单，主要是像控制器的名字，model的名字一定要一致，不然就无法实现功能需求。

0 0