Angular Bootstrap UI評分系統 - 使用ng-model更改最大值

我已經使用Angular-UI創建了評分系統。顯示的恆星數量來自一個稱爲max的變量。我能夠使用ng-model在輸入內顯示這個變量，但是一旦我修改它，它就不會改變星號的數量。Angular Bootstrap UI評分系統 - 使用ng-model更改最大值

你可以明白我的意思在這個Plunker。

下面是相關的JS：

.directive('myRating', function() { 
    return { 
    restrict: 'E', 
    template: '<div> \ 
     <div class="row rating" ng-controller="RatingDemoCtrl"> \ 
      <rating value="rate" max="max" readonly="isReadonly" state-on="\'glyphicon-star rated\'" state-off="\'glyphicon-star\'"></rating> <a class="glyphicon glyphicon-pencil" ng-show="editMode" ng-click="editStars = !editStars"></a>\ 
      <input ng-if="editStars" type="text" class="form-control" ng-model="max" /> \ 
     </div> \ 
     </div>', 
    replace: true, 
    }; 
}); 

var RatingDemoCtrl = function ($scope) { 
    $scope.rate = 0; 
    $scope.max = 10; 
    $scope.isReadonly = false; 

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

的ng-model工作正常，因爲它每次都會顯示出最大的價值，但它不會修改它的實時性。

任何想法？

來源

2014-03-03 Eric Mitjans

http://angulartutorial.blogspot.in/2014/03/rating-stars-in-angular-js-using.html – Prashobh

這是完全可行的。複製ui-bootstrap代碼並稍微修改一下。我入侵了，它似乎工作得很好。檢查出工作PLUNKER。這是我所做的改變，他們可以在2493-2559行上看到。

首先，我走進了指令，並添加maxRange作爲雙向綁定對象

scope: { 
    value: '=', 
    onHover: '&', 
    onLeave: '&', 
    maxRange: '=max' 
},

然後，我走進了控制器，改變了幾件事情，所以我可以看maxRange值和更新基於對象在那。

$scope.$watch('maxRange', function() { 
    $scope.range = createRateObjects(new Array(parseInt($scope.maxRange))); 
});

黑客岩石。如果它不符合您的需求，不要害怕修改其他人的代碼！

來源

2014-03-03 04:50:29

扎克，範tas-tic –

@EricMitjans，你應該改變這個問題的標題像「用戶界面 - 指示可變的最大值「或其他。目前的標題可能對有類似問題的人沒有幫助！ –

你說得對。完成！ –

我只是快速看了看這個問題，它似乎像AngularJS引導評級指令不處理更新上飛的最大值。

來源

2014-03-03 04:10:16 MikeMatrix

關於更多鈔票的解決方法的任何想法？謝謝邁克！ –

我認爲最簡單的解決方案是包裝自己的評級指令。否則，或者猴子修補他們的代碼，爲此問題提出拉取請求，或者報告問題並用拇指撥弄。編輯：也關於如何做到這一點，你可能想看看他們是如何做到這一點。 [rating.js]（https://github.com/angular-ui/bootstrap/blob/master/src/rating/rating.js） [rating.html]（https://github.com/angular -ui /引導/ BLOB /主/模板/等級/ rating.html） – MikeMatrix

嗨麥克，我重做它用這個例子：http://www.befundoo.com/university/tutorials/angularjs-directives-tutorial/ 評分系統完美地工作，buuut，同樣的問題更新在飛行中的星級變量。你可以在這裏看到新的Plunker：http://plnkr.co/edit/nYQ2lbq0O0ecXOEB20vK?p=preview還有什麼可以的？不知何故，我綁定單向（變量 - >輸入），但不是其他方式... –

我無意中發現這個黑客另：

包裝一下你的等級，指令在NG-IF也似乎工作。

<div ng-if="true"> 
    <rating max="myVar"></rating> 
</div>

根據角文檔，NG-如果將重新插入HTML上各評價，觸發myVar重新評價。

是的，它仍然是一個有點哈克，但我認爲這是不是改變你的bower_components文件夾代碼，這將是overwritter每次更新更漂亮。

來源

2015-03-16 12:29:14 raoel

Angular Bootstrap UI評分系統 - 使用ng-model更改最大值

回答

相關問題