Предотвращение отображения фигурных скобок на веб-странице

Простая программа, чтобы помочь ознакомиться с AngularJS, и в настоящее время возникли проблемы с кодом в тегах. Каждый раз, когда я запускаю этот код, фигурные скобки и содержимое внутри всегда появляются на веб-странице, как предотвратить это

<head>
    <title> Your Shopping Cart </title>
</head>

<body ng-controller="CartController">
<h1> Your Order </h1>

<div ng-repeat="item in items">

<input ng-model="item.quantity">
    *<span>{{item.title}}</span> //Keeps showing on webpage
    <span>{{item.price | currency}}</span> //Keeps showing on webpage
    <span>{{item.price * item.quantity | currency}}</span>* //Keeps showing on webpage
<button ng-click="remove($index)">Remove</button>

</div>

<script src="angular.min.js"> </script>

<script>
function CartController($scope) {$scope.items = [

    {title: 'Paint Pots', quantity: 8, price: 3.95},
    {title: 'Polka Dots', quantity: 17, price: 12.95},
    {title: 'Pebbles', quantity: 5, price: 6.95}
    ];

    scope.remove = function(index){$scope.items.splice(iindex, 1);
    }
}
</script>

</body>

2 ответа

  1. Используйте ng-связывание или ng-плащ:

    ng-bind: https://docs.angularjs.org/api/ng/directive/ngBind

    *<span ng-bind="item.title"></span>
    <span ng-bind="item.price | currency"></span>
    <span ng-bind="item.price * item.quantity | currency"></span>*
    

    ng-cloak: https://docs.angularjs.org/api/ng/directive/ngCloak

    <div ng-repeat="item in items" ng-cloak>
        <input ng-model="item.quantity">
        *<span>{{item.title}}</span> //Keeps showing on webpage
        <span>{{item.price | currency}}</span> //Keeps showing on webpage
        <span>{{item.price * item.quantity | currency}}</span>* //Keeps showing on webpage
        <button ng-click="remove($index)">Remove</button>
    </div>
    

    Работая Скрипка с ng-bindснабженный : http://jsfiddle.net/ADukg/9154/

  2. Переместите ссылку на библиотеку angular в тег head или в верхнюю часть тега body

    <head>
        <title> Your Shopping Cart </title>
    <script src="angular.min.js"> </script>
    </head>
    

    или

    <body>
    <script src="angular.min.js"> </script>