Question

在html页面中，我想使用Angular js的click事件更改HTML内容，但是当click event引发时，它不会更改。

HTML代码

<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-repeat="x in records">{{x}}</h1>
<a href="#" onclick="abc()">aaa</a>

JS代码

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    "Alfreds Futterkiste",
    "Berglunds snabbköp",
    "Centro comercial Moctezuma",
    "Ernst Handel",
  ]
});

function abc() {
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
        $scope.records = [
            "Alfreds",
            "Berglunds",
            "Centro comercial",
            "Ernst",
        ]
    });
}
</script>

Answer 1

您可以通过应用以下更改来实现解决方案

HTML代码

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-repeat="x in records">{{x}}</h1>
<a ng-click="abc()">aaa</a>

JS代码

<script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
      $scope.records = [
        "Alfreds Futterkiste",
        "Berglunds snabbköp",
        "Centro comercial Moctezuma",
        "Ernst Handel",
      ]
       $scope.abc = function () {
                $scope.records = [
                "Alfreds",
                "Berglunds",
                "Centro comercial",
                "Ernst",]
            }; 
    });


    </script>

Angular JS，第二次无法更改html

1 个答案: