Question

一个简单的程序，帮助我熟悉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>

Answer 1

使用ng-bind或ng-cloak：

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/

Answer 2

将角度库引用移动到头标记或正文标记的顶部

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

或

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

防止花括号在网页上显示

2 个答案: