ng-clickイベントが動作しない

角型JSニューベリーはここにあります。私は構築していない仕事のサイトに基本的な変更を加えようとしています。ng-clickイベントが動作しない

データベースのテーブルにdisplay_appraisalという列を追加しました。 displayと呼ばれるテーブルの列と同じように動作させたいと思っていました。

私は、文字通り表示機能のためのコードをコピーして、このような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>

その後、私の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'); 

    },

ボタンが正しく表示されテーブル上の値（成功は1、危険は1）。だから私はデータを正しく引き出していることを知っています。しかし何らかの理由でng-clickが機能しません。また、値を0から1に変更することができるテキストボックスを追加しました。

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

出典

2017-09-14 Christine Gregory

別の角度の初心者。あなたの変更方法が間違っていると確信していますか？おそらく、更新機能に何か問題がありますか？ブレーキポイントでクリックハンドラをデバッグしようとしましたか？クロムデバッガでは、ブレーキポイントを設定することができ、アプリケーションの流れに従うことができます。 –

ありがとうございます。 :) –

ここには、必要な作業を行う2つの方法があるplknrがあります。すべての

Sample

まず私はあなたがmanufaturers配列を提供していなかった、あなたの原因と試合を想定したデータを作成します。そう。

ボタンのクラスを変更するには2つの方法があります。

最初のものはNG-クラスを使用しているこの{'btn-success': manufacturer.display, 'btn-danger': !manufacturer.display}ようとごdisplay_appraisalため"change_display($index)"

第二の代替をNGクリックのうち必要と

このような

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

を行うことができますfuncitonを押してdisplay_apprasial属性を変更します。

詳細については、サンプルをチェックしてください。ここ

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

<!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="[email protected]" 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>

出典

2017-09-14 16:37:23

助けてくれてありがとう！これは私のために働いた。 –

ng-clickイベントが動作しない

答えて

関連する問題