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 相关文章推荐
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
js实现拖拽效果
Feb 12 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Jul 08 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
php register_shutdown_function函数详解
Jul 23 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
利用vscode调试编译后的js代码详解
May 14 Javascript
对VUE中的对象添加属性
Sep 18 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 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记录代码执行时间(实现代码)
2013/07/05 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
原生js实现查询天气小应用
2016/12/09 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
python如何发布自已pip项目的方法步骤
2018/10/09 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
CSS3中文字镂空、透明值、阴影效果设置示例小结
2016/03/07 HTML / CSS
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
护士自我鉴定
2013/10/23 职场文书
自动化专业毕业生自荐信
2013/11/01 职场文书
高一家长会邀请函
2014/01/12 职场文书
总经理的岗位职责
2014/02/23 职场文书
协议书格式
2014/04/23 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
档案信息化建设方案
2014/05/16 职场文书
英语教研活动总结
2014/07/02 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
医院护士工作检讨书
2014/10/26 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
南极大冒险观后感
2015/06/05 职场文书
python OpenCV学习笔记
2021/03/31 Python
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android