无法将参数发送到 ng-init

Unable to send parameters to ng-init

本文关键字：ng-init 参数      更新时间：2023-09-26
<input type="number" maxlength="1" max="5" min="0" placeholder="0" ng-model="rate">
<div ng-init="stars=Func(2)">
  Rating: <span ng-repeat="x in stars track by $index">*</span>
</div>

在上面的代码中，我想传递ng-model="rate"，rate到函数Func。 ex: Func(rate);这里的费率应该从ng-model传递。

JS代码： 

var val='';
$scope.Func = function fun(n){
     if(n == 0){ 
        val = val + ''; 
     } else { 
        val = val+'a'; 
        return fun(n-1); 
     } return val; 
};
你需要

重写你的Func，这样它返回一个数组，其中包含你的rate的元素数量，这样你的ng-repeat就可以用它来显示星星。

就像

  $scope.Func = function(n) {
    return new Array(n);
  }

现在，使用ng-init将rate初始化为两个：

<input type="number" maxlength="1" max="5" min="0" placeholder="0" ng-model="rate" ng-init="rate=2" >

普伦克尔在这里

编辑：如果您的要求是不使用 Array aka 集合，则ng-repeat选项不可用。不要害怕，我们可以返回一串星星。

将您的Func更改为以下内容：

  $scope.getStars = function(n) {
    var stars = "";
    for (var i = 0; i < n; i++) {
      stars += "*";
    }
    return stars;
  }

您的评级现在将只显示字符串：

<div >
  Rating: {{getStars(rate)}}
</div>

新的 Plnkr 在这里

由于您不能使用数组并且速率限制相当低，因此您无需创建函数，您可以使用ngSwitch来显示/隐藏适当的速率，如下所示：

(function() {
  'use strict';
  angular.module('app', [])
    .controller('mainCtrl', function($scope) {
      $scope.rate = 2;
    })
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
  <input type="number" maxlength="1" max="5" min="0" placeholder="0" ng-model="rate">
  <div ng-switch="rate">
    Rating:
    <span ng-switch-when="1">*</span>
    <span ng-switch-when="2">**</span>
    <span ng-switch-when="3">***</span>
    <span ng-switch-when="4">****</span>
    <span ng-switch-when="5">*****</span>
  </div> 
</body>
</html>

相关文章：