Question

＆＃13;

var app = angular.module("myApp", ['ngRoute']);

app.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: "views/table_products.html",
                controller: "controller"
        })
        .otherwise({
            redirectTo: '/'
        });
    }]);

＆＃13;

我不知道出了什么问题。我的观点并未显示table_products.html。我正确设置了提供者，文件路径也正确，ng-view也是如此。

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FIRST ANGULAR APP - TRAINING</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">

</head>
<body  ng-app="myApp">
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

        <div ng-view></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="JS/app.js"></script>
<script src="JS/controller/controller.js"></script>
</body>
</html>

my app.js;

<!-- begin snippet: js hide: false -->

＆＃13;

这是我的控制器;

＆＃13;

app.controller('controller', ['$scope', function($scope) {
    $scope.products = [
        {
            name: "Tomato",
            calories: 10,
            proteins: 20,
            carbohydrates: 30,
            fat: 40,
            priceForKg: 3,
            priceForOne: 0.6,
            amount: 0
        },
        {
            name: "Cucumber",
            calories: 10,
            proteins: 80,
            carbohydrates: 30,
            fat: 40,
            priceForKg: 3,
            priceForOne: 0.6,
            amount: 0
        },
        {
            name: "Corn",
            calories: 10,
            proteins: 60,
            carbohydrates: 30,
            fat: 40,
            priceForKg: 3,
            priceForOne: 0.6,
            amount: 0
        }
    ];
    $scope.sumProtein = function () {
        var sum = 0,
            i;
        for ( i = 0 ; i < $scope.products.length ; i++ ) {
            sum += ( $scope.products[i].proteins * 0.01 * $scope.products[i].amount );
        }
        return sum.toFixed(0);
    };
}]);

and table_products.html

＆＃13;

// AND HERE IS TABLE_PRODUCTS.HTML //    

<div ng-controller="controller">
<table>
        <thead>
        <tr>
            <th> # </th>
            <th> PRODUCT </th>
            <th> CALORIES </th>
            <th> PROTEINS </th>
            <th> CARBOHYDRATES </th>
            <th> FAT </th>
            <th> PRICE FOR 1KG</th>
            <th> PRICE FOR ONE ART</th>
            <th> QUANTITY </th>
        <tr>
        </thead>
        <tbody>
        <tr  ng-repeat="x in products">
            <td> {{ $index +1 }}</td>
            <td> {{ x.name }}</td>
            <td> {{ x.calories }}</td>
            <td> {{ x.proteins }}</td>
            <td> {{ x.carbohydrates }}</td>
            <td> {{ x.fat }}</td>
            <td> {{ x.priceForKg }}</td>
            <td> {{ x.priceForOne }}</td>
            <td> <input type="number" ng-model="x.amount"> </td>
        </tr>
        </tbody>
    </table>
    </div>
<div>
    <p> SUM:  {{ sumProtein() }}</p>
</div>

＆＃13;

Answer 1

在此处找到您的代码段已更正[Plunk Sample] (http://plnkr.co/edit/LBHN0u?p=preview)

此错误是由于您的脚本加载顺序导致模块未正确加载。

希望这有帮助!!!

角度ng视图不显示

1 个答案: