Angularjs ui.bootstrap.rating 如何发布答案

【问题标题】：Angularjs ui.bootstrap.rating how to postAngularjs ui.bootstrap.rating 如何发布
【发布时间】：2014-11-14 21:20:47
【问题描述】：

我正在尝试使用 angularjs 建立一个星级评分系统，所以经过一些研究后我发现了这个http://angular-ui.github.io/bootstrap/ 但由于我对 Angular 完全陌生，我似乎无法弄清楚如何将用户选择的评分发布回 symfony 控制器。

HTML：

<div ng-controller="RatingDemoCtrl">
<rating ng-model="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null"></rating>
 <span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{%verbatim%}{{percent}}%{%endverbatim%}</span>
</div><!-- rating controller end-->

角度控制器：

  tagApp.controller('RatingDemoCtrl', function ($scope, $http) {
  $scope.max = 5;
  $scope.isReadonly = false;

  $scope.hoveringOver = function(value) {
    $scope.overStar = value;
    $scope.percent = 100 * (value / $scope.max);
  };

  $scope.ratingStates = [
    {stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle'},
    {stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty'},
    {stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle'},
    {stateOn: 'glyphicon-heart'},
    {stateOff: 'glyphicon-off'}
  ];
});

【问题讨论】：

标签： angularjs

【解决方案1】：

您可以观看您的rate，如果用户更新配给，请使用$http 将其发布到您的后端

请看下面的演示

var app = angular.module('app', ['ui.bootstrap']);


app.controller('RatingDemoCtrl', function($scope, $http) {
  $scope.max = 5;
  $scope.isReadonly = false;

  $scope.hoveringOver = function(value) {
    $scope.overStar = value;
    $scope.percent = 100 * (value / $scope.max);
  };

  $scope.ratingStates = [{
    stateOn: 'glyphicon-ok-sign',
    stateOff: 'glyphicon-ok-circle'
  }, {
    stateOn: 'glyphicon-star',
    stateOff: 'glyphicon-star-empty'
  }, {
    stateOn: 'glyphicon-heart',
    stateOff: 'glyphicon-ban-circle'
  }, {
    stateOn: 'glyphicon-heart'
  }, {
    stateOff: 'glyphicon-off'
  }];

  $scope.$watch('rate', function(val) {

    function sucess(data) {

      console.log(data);

    };

    function error(response) {

      console.log(response)

      alert("Can't post " + response.data + " Error:" + response.status);

    }



    if (val) {

      var data = {
        rating: val,
        user: "userId" // I'm not sure where is your userId

      }

      $http.post("yourUrl", data).then(sucess, error);


    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>

<body ng-app="app">

  <div ng-controller="RatingDemoCtrl">
    <rating ng-model="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null"></rating>
    <span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{%verbatim%}{{percent}}%{%endverbatim%}</span>
  </div>
</body>

【讨论】：

感谢完美，但我忘了提到我也想将用户 ID 传递给相同的 $http 方法。我怎么能这样做？
@VxsdfsdfAzcxzc 请查看更新，您可以创建对象 ie:data，将该对象发布到您的后端。