AngularJSをクリックした後のスイッチボタン

-1

"on"ボタンをクリックすると、私のAPIがxhrを実行して自分のデータを "アクティブ"にします。しかし、ボタンをクリックすると、私のAPIはXHRを "非アクティブ"にします。data.isactive私はデータAPI（0または1）から取得しました。したがって、私は_AngularJSをクリックした後のスイッチボタン

ng-show and ng-hide

を使用し、私は私のボタンを「オフ」または私のisactive === 1またはisactive === 0どうかを示すを「ON」に示しました。そう、

<button ng-show="data.active" type="button" class="btn btn-default" ng-click="FiturThread(data)"><i class="fa fa-toggle-off"></i> Off</button> 
<button ng-hide="data.active" type="button" class="btn btn-success" ng-click="FiturThread(data)"><i class="fa fa-toggle-on"></i> On</button>

私の問題は、私は「アクティブ成功」「上」と警告実行]ボタンをクリックすると、ボタンを「オン」「オフ」ボタンに置き換えてください：

私はこのコードをHTMLを使用しました代わりに。

私に解決策を教えてもらえますか？私は何を使わなければならなかったのですか？ここで

出典

2017-02-20 userpr

これを試してみて、データに問題がなければならない、私は応答あなたを検査することをお勧め実施例

ですありがとうブラウザのxhrコールから取得します。 – George

応答xhrが正しいと思います。 – userpr

私は結果がデータの配列だと思って、各データに対してアクティブ/非アクティブを実行するためにng-repeatを書きます。そのng-repeatの中にボタンは留まります。私はこれを理解した。そうですか？ –

はあなたのHTMLは正常に見える

<!DOCTYPE html> 
 
<html lang="en"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> 
 
</script>     
 

 
<body> 
 
    <div ng-app="myApp" ng-controller="myCtrl"> 
 
     <button ng-show="data.active" ng-click="FiturThread(data)">First Button</button> 
 
     <button ng-hide="data.active" ng-click="FiturThread(data)">Second Button</button> 
 
    </div> 
 

 
    <script> 
 

 
     var app = angular.module('myApp', []); 
 
     app.controller('myCtrl', function($scope) { 
 

 
      $scope.data = {}; 
 
      $scope.data.active = true; 
 
      $scope.FiturThread = function(){ 
 
      $scope.data.active = !$scope.data.active; 
 
     } 
 

 
    }); 
 
</script> 
 
</body> 
 
</html>

出典

2017-02-20 11:55:01

それは働いていません – userpr

あなたはどんなエラーが発生しましたか？ –

はい、 "TypeError：プロパティ '未定義のアクティブ'を読み取ることができません – userpr

AngularJSをクリックした後のスイッチボタン

答えて

関連する問題