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 相关文章推荐
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
Nov 02 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 Javascript
javascript如何写热点图
Dec 08 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 Javascript
vant中的toast层级改变操作
Nov 04 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的FTP学习(一)[转自奥索]
2006/10/09 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
php中instanceof 与 is_a()区别分析
2015/03/03 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
JS 分号引起的一段调试问题
2009/06/18 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
Python中的多行注释文档编写风格汇总
2016/06/16 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
如何基于Python创建目录文件夹
2019/12/31 Python
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
幼儿园中秋节活动方案2013
2014/01/29 职场文书
书法比赛获奖感言
2014/02/10 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android
Nginx反向代理、重定向
2022/04/13 Servers