AngularJS按钮ng-click不起作用

Question

index.html index.html

 <!DOCTYPE html>
<html ng-app="todoApp">
<head>
  <title>To Do List</title>
  <link href="skeleton.css" rel="stylesheet"/>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="todoController">
  <div class="section hero">
    <div class="container">
      <div class="row">
        <div class="three columns">
            <li>
              <button class="button button-primary" ng-click="btnClick(first)">Data 1</button>
            </li>
        </div>
        <div class="nine columns">
          <h4>{{dataText}}</h4>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

app.js app.js

var app = angular.module('todoApp', []);
app.controller('todoController', function ($scope) {
      $scope.dataText = "";
      $scope.btnClick = function (num){
        dataText = "This is data from the " + num + " button."
      };
  });

When I click the button, I would expect the ng-click to initiate and call the function in the controller, but when I click nothing happens, the text on the screen doesn't change or anything. 当我单击按钮时，我希望ng-click会启动并调用控制器中的函数，但是当我单击时什么也没有发生，则屏幕上的文本不会更改或发生任何变化。 What am I doing wrong? 我究竟做错了什么？

Answer 1

There is no variable named first in your html, html中没有名为first的变量，

 <li>
   <button class="button button-primary" ng-click="btnClick(first)">Data 1</button>
 </li>

Instead of that, Pass it as a string 取而代之的是，将其作为字符串传递

 <li>
   <button class="button button-primary" ng-click="btnClick('first')>Data 1</button>
 </li>

Also change the line like this, 像这样改变线

  $scope.btnClick = function (num){
    $scope.dataText = "This is data from the " + num + " button."
  };

Here is the working Plunker 这是工作中的Plunker

AngularJS按钮ng-click不起作用

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-10-29 17:58:37

AngularJS按钮ng-click不起作用

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-10-29 17:58:37

解决方案1
2 已采纳 2015-10-29 17:58:37