角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