Question

如何在脚本标记中使用角度表达式...我对此很新，需要帮助？以下是我的java脚本代码示例：

<script id="modal-2.html" type="text/ng-template">
    <div class="modal transparent">
        <div class="card">
            <i class="icon ion-ios7-close close-modal" ng-click="closeModal(2)"></i>
            <div class="item item-divider">
                {{card.title}}
            </div> 
            <div class="item item-text-wrap">
                {{card.details}}
            </div>
        </div>
    </div>
</script>

以下是我的数组示例：

.controller('TodoCtrl', function($scope, $ionicPopup, $timeout, $ionicModal, $ionicSideMenuDelegate) {

    $scope.cardss = 
    {id:1, title:'Frank', src:'img/Frank.png',details:'This will be the products description!'},
    {id:2, title:'Generali', src:'img/Generali.png',details:'This will be the products description!'},
    {id:3, title:'John Lewis', src:'img/JohnLewis.png',details:'This will be the products description!'},
    ];

Answer 1

控制器中有一系列卡片，因此您需要使用ng-repeat进行迭代。

<script id="modal-2.html" type="text/ng-template">
<div class="modal transparent">
<div class="card" ng-repeat="card in cardss">
<i class="icon ion-ios7-close close-modal" ng-click="closeModal(2)"></i>
<div class="item item-divider">
{{card.title}}
</div> 
<div class="item item-text-wrap">
{{card.details}}
</div>
</div>
</div>
</script>

示例中的数组缺少左右方括号，因此数组将如下所示：

$scope.cardss = [
  {id:1, title:'Frank', src:'img/Frank.png',details:'This will be the products description!'},
  {id:2, title:'Generali', src:'img/Generali.png',details:'This will be the products description!'},
  {id:3, title:'John Lewis', src:'img/JohnLewis.png',details:'This will be the products description!'},
  ];

Answer 2

在部分模板中没有使用AngularJS表达式的特殊功能。

如上所述，您的模型实际上是数组 - 所以您必须使用ng-repeat迭代这些项目，如下所示：

<ul>
    <li ng-repeat="card in cards">
        Card id: {{card.id}}
        Card title: {{card.title}}
        Card details: {{card.details}}
    </li>
</ul>

请参阅工作JSFiddle示例。

如何在脚本标记内使用角度表达式

2 个答案: