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 相关文章推荐
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
vue打包的时候自动将px转成rem的操作方法
Jun 20 Javascript
JavaScript实现切换多张图片
Jan 27 Javascript
36个正则表达式(开发效率提高80%)
Nov 17 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
SONY ICF-SW55的电路分析
2021/03/02 无线电
php定界符
2014/06/19 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
跟老齐学Python之Python文档
2014/10/10 Python
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
利用python实现命令行有道词典的方法示例
2017/01/31 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
HTML5通用接口详解
2016/06/12 HTML / CSS
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
万年牢教学反思
2014/02/15 职场文书
python 如何做一个识别率百分百的OCR
2021/05/29 Python
html实现弹窗的实例
2021/06/09 HTML / CSS