将一个对象的属性值除以另一个（AngularJS）？
[英]Divide One Object Property Value by Another (AngularJS)?
问题描述
I have an ng-repeat for data values from an object. 
我有一个ng-repeat对象的数据值。
<div ng-controller="myctrl">
<ul ng-repeat="number in numbers">
<li><span ng-bind="number.first"></span></li>
<li><span ng-bind="number.second"></span></li>
<li><span ng-bind="number.third"></span></li>
</ul>
</div>
One of the object property values is dependent on the value of other property values (I want the value of third to be first / second). 对象属性值之一取决于其他属性值的值（我希望第三值是第一/第二）。
.controller('myctrl', function($scope) {
$scope.numbers = [
{
first: 8,
second: 5,
third: ? (I need this to be first / second)
},
{
first: 4,
second: 5,
third: ? (I need this to be first / second)
}
];
});
I must have set this up fundamentally wrong because I find it hard to imagine it should be this difficult and I haven't worked with AngularJS or js in general much in the past 12 months so chances are I've gone about the ng-repeat all wrong. 我一定把这个设置从根本上说是错误的，因为我很难想象它会这么困难，而且在过去的12个月中我通常没有与AngularJS或js一起工作，所以我有机会尝试ng-repeat都错了。
3 个解决方案
解决方案1
3 已采纳 2016-05-19 06:30:34
You can do this in view by dividing first key with the second ( <li><span ng-bind="number.first/number.second"></span></li> ) or use getter in the controller. 您可以通过将第一个键除以第二个键（ <li><span ng-bind="number.first/number.second"></span></li> ）来执行此操作，也可以在控制器中使用getter 。
A
getteris a method that gets the value of a specific property.getter是一种获取特定属性值的方法。
var myApp = angular.module('myApp', []); myApp.controller('MainController', function($scope) { $scope.numbers = [{ first: 8, second: 5, get third() { return this.first / this.second } }, { first: 4, second: 5, get third() { return this.first / this.second } }]; });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app='myApp' ng-controller="MainController"> <ul ng-repeat="number in numbers"> <li><span ng-bind="number.first"></span> </li> <li><span ng-bind="number.second"></span> </li> <li><span ng-bind="number.third"></span> </li> </ul> </body>
Fiddle Demo 小提琴演示
解决方案2
1 2016-05-19 06:26:45
If you do not need the third number in the object but it could be null or you could not even have it in the object at all. 如果您不需要对象中的第三个数字，但它可以为null或者甚至根本没有它。 You an do it like this: 您可以这样做：
$scope.numbers = [
{
first: 8,
second: 5,
third: null /* you do not actually need this at all */
},
{
first: 4,
second: 5,
third: null
}
];
<ul ng-repeat="number in numbers">
<li><span ng-bind="number.first"></span></li>
<li><span ng-bind="number.second"></span></li>
<li><span ng-bind="(number.first / number.second)"></span></li>
</ul>
解决方案3
1 2016-05-19 06:26:56
try this 尝试这个
var app = angular.module("app",[]); app.controller("myctrl" , function($scope){ $scope.numbers = [ { first: 8, second: 5, }, { first: 4, second: 5, } ]; });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body> <div ng-app="app"> <div ng-controller="myctrl"> <ul ng-repeat="number in numbers"> <li><span ng-bind="number.first"></span></li> <li><span ng-bind="number.second"></span></li> <li><span ng-bind="number.first/number.second"></span></li> </ul> </div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.