Question

在我的要求中，如果用户在文本框中输入5个值中的某个值，该值与预期的相关星级相关。我在谷歌搜索但是我的要求没有使用这些例子。这是我现在的代码。如果我输入3并点击提交3星评级在下面的星星完成。这是我的例子，我是angular-js的新手。请帮我解决这个问题。提前谢谢

 var app = angular.module("myApp", []);
     app.controller("myCntrl", function ($scope, $http, $location) {   
    $scope.rate = function () {
        alert("hi");
    }
});
app.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.ratingValue
                });
            }
        }
    }
});
<body ng-app="myApp">
<div ng-controller="myCntrl">
<input type="text"/><button class="btn btn-default"  id="click"  type="submit"  ng-click="rate()">submit</button><span ng-repeat="rating in ratings">{{rating.current}} out of{{rating.max}}<div star-rating rating-value="rating.current" max="rating.max" ></div></span></div>

Answer 1

设置最大号码。星星和点击星星选择评级：

＆＃13;

var app = angular.module("app", []);
app.controller('ctrl', function($scope) {
  $scope.max = 5;
  $scope.ratingVal = 2;
  $scope.readonly = false;
  $scope.onHover = function(val) {
    $scope.hoverVal = val;
  };
  $scope.onLeave = function() {
    $scope.hoverVal = null;
  }
  $scope.onChange = function(val) {
    $scope.ratingVal = val;
  }

});
app.directive('star', function() {
  return {
    template: '<ul class="rating" ng-mouseleave="leave()">' +
      '<li ng-repeat="star in stars" ng-class="star" ng-click="click($index + 1)" ng-mouseover="over($index + 1)">' +
      '\u2605' +
      '</li>' +
      '</ul>',
    scope: {
      ratingValue: '=',
      max: '=',
      readonly: '@',
      onHover: '=',
      onLeave: '='
    },
    controller: function($scope) {
      $scope.ratingValue = $scope.ratingValue || 0;
      $scope.max = $scope.max || 5;
      $scope.click = function(val) {
        if ($scope.readonly && $scope.readonly === 'true') {
          return;
        }
        $scope.ratingValue = val;
      };
      $scope.over = function(val) {
        $scope.onHover(val);
      };
      $scope.leave = function() {
        $scope.onLeave();
      }
    },
    link: function(scope, elem, attrs) {
      elem.css("text-align", "center");
      var updateStars = function() {
        scope.stars = [];
        for (var i = 0; i < scope.max; i++) {
          scope.stars.push({
            filled: i < scope.ratingValue
          });
        }
      };
      updateStars();

      scope.$watch('ratingValue', function(oldVal, newVal) {
        if (newVal) {
          updateStars();
        }
      });
      scope.$watch('max', function(oldVal, newVal) {
        if (newVal) {
          updateStars();
        }
      });
    }
  };
});

＆＃13;

.rating {
  color: #a9a9a9;
  margin: 0;
  padding: 0;
}
ul.rating {
  display: inline-block;
}
.rating li {
  list-style-type: none;
  display: inline-block;
  padding: 1px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
.rating .filled {
  color: #ffee33;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div class="well" ng-controller="ctrl">
    <div star rating-value="ratingVal" max="max" on-hover="onHover" on-leave="onLeave" readonly="{{readonly}}"></div>
    <div>
      Max:
      <input type="number" name="input" ng-model="max" min="0" max="99" required>
      <p>current value: {{ratingVal}}</p>
      <p>hover on : {{hoverVal?hoverVal:"none"}}</p>
      <p>readonly :
        <input type="checkbox" ng-model="readonly">
      </p>
    </div>
  </div>
</div>

＆＃13;

使用angularjs，jquery的文本框星级评分

1 个答案: