在HTML設置角變量，同時使用NG-重複

我有以下代碼的偉大工程：在HTML設置角變量，同時使用NG-重複

<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切換。這是我已經嘗試過

<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>

但是，這根本不起作用，但我不確定爲什麼。我在控制檯中沒有錯誤。

任何想法？

來源

2017-01-16 Matt Boyle

怎麼樣只是用NG-如果 – MMK

你不需要插即'NG-的init =「barPercentage =（p.availableIpAddressCount/p.totalIpAddressCount）* 100 |編號：0 「' – Satpal

@Satpal如果沒有內插，它仍然不起作用。感謝您的建議。 –

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="[email protected]*" 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="[email protected]" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
<link data-require="[email protected]" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> 
 
<script data-require="[email protected]" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 
<script data-require="[email protected]" 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>

來源

2017-01-16 11:14:31 MMK

這工作完美..感謝你:) –

@MattBoyle太棒了。 – MMK

我強烈建議您在控制器中創建一個變量並將其暴露給範圍。

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

做你的HTML的方式是有效ng-init，但它是highly unrecommended in the docs。

請注意，沒有AngularJS變量，而是暴露給您的模板的名爲$scope的JavaScript對象。

來源

2017-01-16 10:54:51

在HTML設置角變量，同時使用NG-重複

回答

相關問題