个人中心
gpt4 book ai didi

javascript - jQuery Rateyo 评分插件与 AngularJS 集成

转载 作者：行者123 更新时间：2023-11-30 15:41:55 25 4
gpt4 key购买 nike

我正在尝试整合 Rateyo plugin使用 AngularJS 并从指令定义的评级值中获取问题，以下是代码:

编辑:这是工作 plunker

Controller 

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {   
   $http.get("http://mynahcare.info/frontendapi/hospital_list")
   .then(function (response) {$scope.names = response.data.HospitalList;});  
});

指令

app.directive("rateYo", function() {
    return {
        restrict: "A",
        scope: {
            rating: "="
        },
        template: "<div id='rateYo'></div>",
        link: function( scope, ele, attrs ) {
            $(ele).rateYo({
                rating: String("{{scope.rating}}"),
                starWidth: "20px",      
                ratedFill: "#ffce59",
                readOnly: true          
            });
        }
    };
});

这是 HTML 代码

<li ng-repeat="y in names | limitTo: 6"> <a href="<?php echo $this->config->item('search_url');?>{{y.hosurl}}">
  <div class="hospital-card">
    <div class="hospital-card-img-holder">
      <div class="hospital-card-img" style="background-image:url({{y.profile_image}});"></div>
    </div>
    <h3 class="vlcc-name" title="{{y.clinic_title}}">{{y.clinic_name}}</h3>
    <!--Rating begin-->
    <div class="doc-rete">
      <div rate-yo class="mc-doc-rating"></div>
    </div>
    <!--Rating ends-->
    <p class="hospital-specialist">{{y.rating }} {{y.localty }} {{y.city }}</p>
    <p class="vlcc-experince">{{y.clinic_type }}</p>
    <p class="vlcc-address">{{y.hos_time }} </p>
  </div>
  </a>
</li>

控制台中的错误是无效评级，预期值介于 0 和 5 之间

但是如果你看到 API，数据是数字，有人可以看看我在这里做错了什么吗？

最佳答案 

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.14/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.js"></script>
    <style>
.hospital_listing_front > ul > li{display: block; float:left; padding:0 10px; border-right:1px solid #ccc;}
.hospital_listing_front > ul > li > a{ text-decoration:none;}
.hospital_listing_front > ul > li > a:active, .hospital_listing_front > ul > li > a:hover { text-decoration:none;}
.doc-rete {float: left; width: 100%; text-align: center; padding: 20px 0;}
.hospital-card-img{width:100%; height:150px; float:left; padding:30px 0;}
.hospital-card-img > img{width:100px; height:100px; margin:0 auto; display:block;}
    </style>
  </head>

  <body>
    <div ng-app="myApp" ng-controller="customersCtrl">
      <div class="container-fluid section-hospital">
        <div class="container">
          <div class="row quiz-bmi">
            <div class="col-md-12">
              <h3>List data </h3>
              <div class="carousel hospital_listing_front">
                <ul class="slides">
                  <li ng-repeat="y in names | limitTo: 3">
                    <div class="hospital-card">
                      <div class="hospital-card-img-holder">
                        <div class="hospital-card-img">
                          <img src="{{y.profile_image}}" />
                        </div>
                      </div>
                      <h3 class="vlcc-name" title="{{y.clinic_title}}">{{y.clinic_name}}</h3>
                      <div class="doc-rete">
                        <rate-yo rating="y.rating" class="mc-doc-rating"></rate-yo>
                      </div>
                      <p class="hospital-specialist">{{y.rating }} {{y.localty }} {{y.city }}</p>
                      <p class="vlcc-experince">{{y.clinic_type }}</p>
                      <p class="vlcc-address">{{y.hos_time }} </p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {   
   $http.get("https://mynahcare.com/frontendapi/hospital_list")
   .then(function (response) {$scope.names = response.data.HospitalList;});  

});
app.directive("rateYo", function() {
return {
    restrict: "E",
    scope: {
        rating: "="
    },
    template: "<div id='rateYo'></div>",
    link: function( scope, ele, attrs ) {
        $(ele).rateYo({
            rating: scope.rating,
            starWidth: "20px",      
            ratedFill: "#ffce59",
            readOnly: true          
        });
    }
  };
});
    </script>
  </body>

</html>

将你的指令“rateYo”作为元素，这样你就可以通过属性传递“rating”的值，并且可以在指令范围内访问它。

请进行以下更改以解决您的问题

在指令中

app.directive("rateYo", function() {
return {
    restrict: "E",
    scope: {
        rating: "="
    },
    template: "<div id='rateYo'></div>",
    link: function( scope, ele, attrs ) {
        $(ele).rateYo({
            rating: scope.rating,
            starWidth: "20px",      
            ratedFill: "#ffce59",
            readOnly: true          
        });
    }
  };
});

在 HTML 中替换 

<div rate-yo="" class="mc-doc-rating"></div>

与

<rate-yo rating="y.rating" class="mc-doc-rating"></rate-yo>

关于javascript - jQuery Rateyo 评分插件与 AngularJS 集成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40669597/

25 4 0
文章推荐： javascript - 来自列属性的 Handsontable 下拉源
文章推荐： c - 如何在 OpenGL 和 GLUT 中制作由按键触发的旋转动画？
文章推荐： c - 如何在 Load Runner 中设置事务的随机选择和概率
文章推荐： javascript - 哪个按钮切换 Bootstrap 模式
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com