Angularjs渲染的 using 指令的星级评分系统示例


Posted in Javascript onNovember 09, 2017

本文介绍Angularjs渲染的 using 指令的星级评分系统示例,分享给大家,具体如下:
我试图创建静态使用 angularjs/离子成效甚微的星级评分系统。但目前什么都不输出到屏幕上......我是我做错了吗?

service.html

<ion-list>
  <ion-item ng-repeat="business in businessList track by $index" class="item-icon-right">
   <h2>{{business.name}}</h2> {{business.distance}} miles
   <br>
   <div star-rating rating-value="{{business.rating}}" max="rating.max"></div>
   <i class="icon ion-chevron-right icon-accessory"></i>
  </ion-item>
 </ion-list>

directives.js

angular.module('starter.directives', [])

.directive('starRating', function() {
 return {
  restrict: 'A',
  template: '<ul class="rating">' +
   '<li ng-repeat="star in stars" ng-class="star">' +
   '\u2605' +
   '</li>' +
   '</ul>',
  scope: {
   ratingValue: '=',
   max: '='
  },
  link: function(scope, elem, attrs) {
   scope.stars = [];
   for (var i = 0; i < scope.max; i++) {
    scope.stars.push({
     filled: i < scope.rating
    });
   }
  }
 }
});

services.js

.service("BusinessData", [function () {
  var businessData = [
  {
    id: 1,
    serviceId: 1,
    name: 'World Center Garage',
    distance: 0.1,
    rating: 4
  }
];

  return {
    getAllBusinesses: function () {
      return businessData;
    },

    getSelectedBusiness: function(serviceId) {
      var businessList = [];
      serviceId = parseInt(serviceId);
      for(i=0;i<businessData.length;i++) {
        if(businessData[i].serviceId === serviceId) {
          businessList.push(businessData[i]);
        }
      }
      return businessList;
    }
  }
}])

controller.js

.controller('ServiceCtrl', function($scope, ServicesData, BusinessData, $stateParams) {
 $scope.service = ServicesData.getSelectedService($stateParams.service);
 $scope.businessList = BusinessData.getSelectedBusiness($stateParams.service);
});

解决方法 1:

controller.js

.controller('ServiceCtrl', function($scope, ServicesData, BusinessData, $stateParams) {
 $scope.service = ServicesData.getSelectedService($stateParams.service);
 $scope.businessList = BusinessData.getSelectedBusiness($stateParams.service);
 $scope.ratings = {
   current: 5,
   max: 10
   };

和也修改service.html

<div star-rating rating-value="rating.current" max="rating.max"></div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 Javascript
js中的深浅拷贝问题简析
May 10 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 #jQuery
简单实现jquery隔行变色
Nov 09 #jQuery
基于Datatables跳转到指定页的简单实例
Nov 09 #Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 #Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 #jQuery
js使用xml数据载体实现城市省份二级联动效果
Nov 08 #Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 #Javascript
You might like
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
range 标准化之获取
2011/08/28 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
2015/11/22 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
JavaScript利用fetch实现异步请求的方法实例
2017/07/26 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
分分钟入门python语言
2018/03/20 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
python中判断文件结束符的具体方法
2020/08/04 Python
Python扫描端口的实现
2021/01/25 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
自荐信格式技巧有哪些呢
2013/11/19 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
初中重阳节活动总结
2015/05/05 职场文书
学校安全管理制度
2015/08/06 职场文书
学校运动会开幕词
2016/03/03 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书
Python机器学习之决策树和随机森林
2021/07/15 Javascript
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS