ng-click事件不起作用

Question

Angular JS newbie here. Angular JS新手在这里。 I am trying to make a basic change to a site at work that I did not build. 我正在尝试对未构建的网站进行基本更改。

I added a column to a table on the database that is called display_appraisal. 我在数据库中的表上添加了一列，称为display_appraisal。 I wanted it to work the same as a column on the table called display. 我希望它与表上称为display的列相同。

I literally copy the code for the display function and changed it to display_appraisal from the html file like this: 我从字面上复制了显示函数的代码，并将其从html文件更改为display_appraisal，如下所示：

<button class="btn btn-mini" ng-class="{'btn-success': manufacturer.display==1, 'btn-danger': manufacturer.display!=1}" ng-click="manufacturers.change_display($index)"><i class="icon-white" ng-class="{'icon-ok': manufacturer.display==1, 'icon-remove': manufacturer.display!=1}"></i></button>
<button class="btn btn-mini" ng-class="{'btn-success': manufacturer.display_appraisal==1, 'btn-danger': manufacturer.display_appraisal!=1}" ng-click="manufacturers.change_display_appraisal($index)"><i class="icon-white" ng-class="{'icon-ok': manufacturer.display_appraisal==1, 'icon-remove': manufacturer.display_appraisal!=1}"></i></button>

then in my ctrl file: 然后在我的ctrl文件中：

change_display: function(index) {
        this.list[index].display = (0 == this.list[index].display) ? 1: 0;
        this.update(index, 'display');
    },
change_display_appraisal: function(index) {
        this.list[index].display_appraisal = (0 == this.list[index].display_appraisal) ? 1: 0;
        this.update(index, 'display_appraisal');

    },

The buttons are displaying correctly for the values on the table (success for 1, danger for 1). 按钮正确显示了表格中的值（成功表示1，危险表示1）。 So I know I am pulling in the data correctly. 所以我知道我正确地提取了数据。 But for some reason, the ng-click does not work. 但是由于某些原因，ng-click无效。 I also added a text box that I can change the value from 0 to 1 and that works. 我还添加了一个文本框，可以将值从0更改为1，并且可以正常工作。

<input hv-blur ng-change="manufacturers.update($index,'display_appraisal')" placeholder="display_appraisal" type="text" ng-model="manufacturer.display_appraisal">

Any ideas? 有任何想法吗？

Answer 1

Here is a plknr with two ways to do what you need. 这里有两种方法可以满足您的需求。

Sample 样品

First of all i create a data supposing match with your cause you did not provided the manufaturers array. 首先，我创建一个假设与您的原因匹配的数据，但您未提供manufaturers数组。 so. 所以。

I put two ways you can change the class of the button. 我提出了两种方法可以更改按钮的类。

The first one is using the ng-class like this {'btn-success': manufacturer.display, 'btn-danger': !manufacturer.display} and ng-click "change_display($index)" 第一种是使用ng类，例如{'btn-success': manufacturer.display, 'btn-danger': !manufacturer.display}然后ng单击 "change_display($index)"

Second alternative for your display_appraisal can do like this display_appraisal第二种替代方法可以这样

ng-class="{true:'btn-success', false:'btn-danger' 
[manufacturer.display_appraisal]" ng-click="manufacturer.display_appraisal = 
!manufacturer.display_appraisal

with out necessity of a funciton to change the display_apprasial attr. 无需使用函数即可更改display_apprasial属性。

Check the sample for more detail. 检查样本以获取更多详细信息。

SCRIPT 脚本

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';


  $scope.change_display = function(index) {
    console.log(index);
      $scope.data[index].display = (false == $scope.data[index].display) ? true: false;

  };

  $scope.data = [
    {
      name:'one',
      display_appraisal : true,
      display : true
    },
    {
      name:'two',
      display_appraisal : false,
      display : true
    },
    {
      name:'three',
      display_appraisal : false,
      display : false
    },
    {
      name:'four',
      display_appraisal : true,
      display : false
    },
    {
      name:'five',
      display_appraisal : false,
      display : false
    }
    ]
});

HTML 的HTML

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>


    <table class="table table-stripped">
      <thead>
        <tr>
        <th>column1</th>
        <th>buttons</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="manufacturer in data">
          <td>{{manufacturer.name}}</td>
          <td>
            <button class="btn btn-mini" ng-class="{'btn-success': manufacturer.display, 'btn-danger': !manufacturer.display}" ng-click="change_display($index)"><i class="icon-white" ng-class="{'icon-ok': manufacturer.display==true, 'icon-remove': manufacturer.display==false}"></i></button>
            <button class="btn btn-mini" ng-class="{true:'btn-success', false:'btn-danger'}[manufacturer.display_appraisal]" ng-click="manufacturer.display_appraisal = !manufacturer.display_appraisal"><i class="icon-white" ng-class="{'icon-ok': manufacturer.display_appraisal==true, 'icon-remove': manufacturer.display_appraisal==false}"></i></button></td>
        </tr>
      </tbody>
    </table>

  </body>

</html>

ng-click事件不起作用

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-09-14 16:37:23

ng-click事件不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-09-14 16:37:23

解决方案1
0 已采纳 2017-09-14 16:37:23