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 相关文章推荐
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
简单了解three.js 着色器材质
Aug 03 Javascript
JS使用setInterval计时器实现挑战10秒
Nov 08 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
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
PHP 正则表达式小结
2015/02/12 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
js 窗口抖动示例
2013/09/04 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
微信小程序如何实现五星评价功能
2019/10/15 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
在Django的上下文中设置变量的方法
2015/07/20 Python
Python 专题一 函数的基础知识
2017/03/16 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
Django更新models数据库结构步骤
2020/04/01 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
Python基于execjs运行js过程解析
2020/11/27 Python
我的求职计划书
2014/01/10 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
营销总监岗位职责
2014/09/16 职场文书
班主任寄语2015
2015/02/26 职场文书
入党积极分子考察意见
2015/06/02 职场文书