Question

我希望在ng-repeat内部的ng-click帮助中包含html页面。但是，它加载了所有ng-repeat元素的所有内容。我的要求是我想仅绑定（ng-include）被点击的元素请找附件供您参考。

HTML

<body ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="message in messages">
        <a ng-click="clickMe()">Clike Me</a>
        <span>{{ message.text }}---{{ message.type }}</span>
        <div ng-include="templateUrl"></div>
    </div>
</body>

JS

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    var messages = [
        { text: "Standard Message", type: "success000" },
        { text: "Success Message!", type: "success111" },
        { text: "Alert Message!", type: "alert222" },
        { text: "secondary message...", type: "secondary333" }
    ]
    $scope.name = 'shiva';
    $scope.count = 0;
    $scope.messages = messages;
    $scope.clickMe = function () {
        //   alert('clicked');
        $scope.count++;
        $scope.templateUrl = "Page.html";
    };
});

page.Html

<b> Included html Code.{{message.type}}---count={{count}}

Answer 1

添加到message新媒体资源clicked。仅在使用ng-include message.clicked为true时设置ng-if。当您click时，请更改message.clicked

上true的状态

像这样：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl',function($scope){
            var  messages = [
      { text: "Standard Message", type: "success0" ,clicked:false},
      {text:"Success Message!", type:"success00",clicked:false},
      {text:"Alert Message!", type : "alert2",clicked:false},
      {text:"secondary message...", type : "secondary3",clicked:false}
            ]
            $scope.name = 'shiva';
            $scope.count = 0;
            $scope.messages = messages;
            $scope.clickMe = function (message) {
             //   alert('clicked');
                $scope.count++;
                message.clicked=true;
                $scope.templateUrl = "Page.html";
            };

        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">  
    <div ng-repeat="message in messages">
        <a ng-click="clickMe(message)">Clike Me</a>
        <span>{{message.text}}---{{message.type}}</span>
        <div ng-if="message.clicked" ng-include="templateUrl"></div>
    </div>
</body>
</html>

Answer 2

首先，您需要添加id您的json数据，如下所示：

var messages = [
    { id: "101", text: "Standard Message", type: "success0", clickCount: 0 },
    { id: "102", text: "Success Message!", type: "success00", clickCount: 0 },
    { id: "103", text: "Alert Message!", type: "alert2", clickCount: 0 },
    { id: "104", text: "secondary message...", type: "secondary3", clickCount: 0 }
]

接下来，您需要运行filter并在ng-click

上找到该项目

$scope.clickMe = function (obj) {
    $scope.messages.forEach(function (value, key) {
        if (value.id === obj.id) {
            value.isClicked = true;
            value.clickCount++;
        }
    });
    $scope.count++;
    $scope.templateUrl = "Page.html";
};

之后，对 Page.html

进行更改

<p class="info">{{ name }}--{{ message.type }}--{{ message.text }}</p>
<p class="element">
    Current Count = ({{ message.clickCount }}), Total Count = ({{ count }})
</p>

最后，您需要进行以下两次HTML更改

1）在ng-click

中添加对象

<a ng-click="clickMe(message)">Clike Me</a>

2）在ng-include

上指定条件

<div ng-include="templateUrl" ng-if="message.isClicked"></div>

Demo

使用ng-include

2 个答案: