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 相关文章推荐
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
Google Map Api和GOOGLE Search Api整合实现代码
Jul 18 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
Nov 03 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
vue生成文件本地打开查看效果的实例
Sep 06 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 Javascript
原生js实现点击轮播切换图片
Feb 11 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中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
PHP实现简单日历类编写
2020/08/28 PHP
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
Javascript实现字数统计
2015/07/03 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
VUE element-ui 写个复用Table组件的示例代码
2017/11/18 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
python字典序问题实例
2014/09/26 Python
详细解析Python中的变量的数据类型
2015/05/13 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
python实现决策树
2017/12/21 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
服装机修工岗位职责
2013/12/26 职场文书
结婚典礼证婚词
2014/01/08 职场文书
退休感言
2014/01/28 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
晚会闭幕词
2015/01/28 职场文书
python删除csv文件的行列
2021/04/06 Python
python中使用redis用法详解
2022/12/24 Redis