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

最新推荐文章于 2022-05-12 19:58:46 发布

wsz智

最新推荐文章于 2022-05-12 19:58:46 发布

阅读量822

点赞数

本文链接：https://blog.csdn.net/u012138931/article/details/50382717

版权

显示图书列表

前端使用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的名字一定要一致，不然就无法实现功能需求。