在使用 ng-repeat 时在 HTML 中设置 Angular 变量答案

【问题标题】：Setting Angular variable in HTML whilst using ng-repeat在使用 ng-repeat 时在 HTML 中设置 Angular 变量
【发布时间】：2023-03-30 12:15:03
【问题描述】：

我有以下代码，效果很好：

<div class="progress progress-striped active">

      <div class="progress-bar progress-bar-success"  style="width:  {{(p.availableIpAddressCount/p.totalIpAddressCount)*100|number:0}}%;background-color: #5cb85c">
        {{(p.availableIpAddressCount/p.totalIpAddressCount)*100|number:0}}
      </div>
    </div>

但是，如您所见，我重复了很多 {{(p.availableIpAddressCount/p.totalIpAddressCount)*100|number:0}}，因此我想将其分配给角度变量。我还想对结果进行 NG-switch。这是我尝试过的

<div class="progress progress-striped active" ng-init = "barPercentage= {{(p.availableIpAddressCount/p.totalIpAddressCount)*100|number:0}}">
<div ng-switch="barPercentage">
  <div ng-switch-when=">=0" class="progress-bar progress-bar-success"  style="width: {{barPercentage}}%;background-color: #5cb85c">
    {{(p.availableIpAddressCount/p.totalIpAddressCount)*100|number:0}}
  </div>
</div>
</div>

但这根本不起作用，但我不确定为什么。我在控制台中没有收到任何错误。

有什么想法吗？

【问题讨论】：

只使用 ng-if 怎么样
你不需要插值，即ng-init = "barPercentage=(p.availableIpAddressCount/p.totalIpAddressCount)*100|number:0"
@Satpal 如果没有插值，它仍然无法工作。谢谢你的建议。
@MMK 这没什么区别，谢谢。
@MattBoyl etry 在 ng-int 中避免 |number:0 并尝试排除 {{}} 。工作样本在这里jsfiddle.net/U3pVM/29446。如果有任何问题，请让我更新

标签： angularjs angularjs-ng-repeat angular-ng-if ng-switch

【解决方案1】：

var app = angular.module('demo', []);
app.controller('DemoCtrl', DemoCtrl);
DemoCtrl.$inject = ['$scope'];

function DemoCtrl($scope) {
  // you can change this as you like. its just for demo purposes.
  $scope.p = {
    "availableIpAddressCount": 100,
    "totalIpAddressCount": 70
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script data-require="ui-bootstrap-tpls@*" data-semver="1.2.5" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.2.5.js"></script>
<script data-require="jquery@2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link data-require="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script data-require="bootstrap@3.3.2" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script data-require="ui-bootstrap@1.3.2" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>

<div ng-app="demo" ng-controller="DemoCtrl">
<!--using ng-if -->
  <div class="progress progress-striped active" ng-init="barPercentage= (p.availableIpAddressCount/p.totalIpAddressCount*100) | number:0">
  <div ng-if="barPercentage>=0" class="progress-bar progress-bar-success" style="width: {{barPercentage | number: 0}}%;background-color: #5cb85c">
    {{barPercentage |number:0}}

  </div>
</div>

<!-- using ng-switch -->
  <div class="progress progress-striped active" ng-init="barPercentage= (p.availableIpAddressCount/p.totalIpAddressCount*100) | number:0">
  <div ng-switch on="(barPercentage>=0)">
    <div ng-switch-when="true">
    <div  class="progress-bar progress-bar-success" style="width: {{barPercentage | number: 0}}%;background-color: #5cb85c">
    {{barPercentage |number:0}}
  </div>
    </div>
    <div ng-switch-default>
      <!-- code to render the regular block -->
    </div>
  </div>
</div>
</div>

【讨论】：

@MattBoyle 太棒了。

【解决方案2】：

我强烈建议您在控制器中创建一个变量并将其公开给范围。

$scope.barPercentage = (p.availableIpAddressCount/p.totalIpAddressCount)*100 ;

在您的 html 中执行此操作的方法实际上是 ng-init，但它是 highly unrecommended in the docs。

请注意，没有 AngularJS 变量，而是一个名为 $scope 的 JavaScript 对象公开给您的模板。

【讨论】：