角js花括号显示为文本

Question

我正在尝试在我的angular js试用版中做一个简单的功能。

我无法使方法调用起作用，它只能将其全部显示为文本。 我无法弄清楚在这么小的事情上我做错了什么。

这是我的全部代码，下面是结果的屏幕截图。

HTML

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app.js"></script>

<body ng-app="beerApp">
<div ng-controller="contentC">
    <div>
        <ul>
            <select ng-model="currentItem" ng-options="item.name for item in items"></select>
        </ul>
    </div>
    <div>
        <p>{{ currentItem.name }}</p>
        <p>{{ currentItem.country }}</p>
        <p>{{ average(currentItem.ratings) }}</p>
        <p ng-repeat="rating in currentItem.ratings">{{ rating.rating }}</p>
    </div>
</div>

的js

var app = angular.module('beerApp', []);
app.controller('contentC', function($scope) {
$scope.items = [
    {name:'Rignes',country:'Norway', ratings:[
        {"rating":3}, {"rating":3}, {"rating":2}]},
    {name:'Pripps',country:'Sweden', ratings:[
        {"rating":2}, {"rating":3}, {"rating":5}]},
    {name:'Tuborg',country:'Denmark', ratings:[
        {"rating":5}, {"rating":4}, {"rating":3}]}
];
$scope.currentItem = {name:'Nothing'};
$scope.average = function (data) {
    console.log("called")
    var sum = 0;
    for(var i = 0; i < data.lenght; i++){
        sum += parseInt(data[i].rating);
    }
    var avg = sum/data.lenght;
    return avg;
};
});

大括号显示

更正的js代码

$scope.average = function (data) {
        var sum = 0; 
        var ratings = 0;
        try {
            for (var d in data){
                sum += parseInt(data[d].rating);
                ratings++;
            }
        } catch (error) {
            sum = 0;
        }
        var avg = sum/ratings;
        return avg;
    };

Answer 1

average函数抛出错误，因此Angular保持绑定不变，因为没有有意义的值绑定到它。

您的代码中有几个错误：

length拼写错误
您没有通过平均所需的参数
我认为您需要遍历data.ratings.length而不是data.length
您的默认currentItem没有等级属性。

工作演示http://codepen.io/anon/pen/reqbZG

var app = angular.module('beerApp', []);

app.controller('contentC', function($scope) {
    $scope.items = [
        {name:'Rignes',country:'Norway', ratings:[
            {"rating":3}, {"rating":3}, {"rating":2}]},
        {name:'Pripps',country:'Sweden', ratings:[
            {"rating":2}, {"rating":3}, {"rating":5}]},
        {name:'Tuborg',country:'Denmark', ratings:[
            {"rating":5}, {"rating":4}, {"rating":3}]}
    ];

    $scope.currentItem = {name:'Nothing', ratings: []};
    $scope.average = function (data) {
        var sum = 0;
        for(var i = 0; i < data.ratings.length; i++){
            sum += parseInt(data.ratings[i].rating);
        }
        var avg = sum/data.ratings.length;
        return avg;
    };
});

以及稍微更新的HTML（平均方法调用）：

<!-- snip -->
    <p>{{ currentItem.name }}</p>
    <p>{{ currentItem.country }}</p>
    <p>{{average(currentItem)}}</p>
    <p ng-repeat="rating in currentItem.ratings">{{ rating.rating }</p>
<!-- snip -->

Answer 2

更改

    <p>{{average()}}</p>

对于

    <p>{{average(items)}}</p>

另外，请尝试检查您的控制台（ctrl + shift + i）

角js花括号显示为文本

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-04-29 21:34:55

解决方案2
0 2016-04-29 21:35:18

角js花括号显示为文本

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-04-29 21:34:55

解决方案2 0 2016-04-29 21:35:18

解决方案1
1 已采纳 2016-04-29 21:34:55

解决方案2
0 2016-04-29 21:35:18