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 相关文章推荐
IE8 原生JSON支持
Apr 13 Javascript
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
浅谈express 中间件机制及实现原理
Aug 31 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
JS+css3实现幻灯片轮播图
Aug 14 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/06/07 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
php中explode函数用法分析
2014/11/15 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
js如何验证密码强度
2020/03/18 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
Django框架多表查询实例分析
2018/07/04 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
Python中常见的数制转换有哪些
2020/05/27 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
计算机求职信
2013/12/01 职场文书
高中军训感想800字
2014/02/23 职场文书
我爱我的祖国演讲稿
2014/05/04 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
三方股东合作协议书
2014/10/28 职场文书