Plnkrコントローラが動作しない

クリックすると追加ボタンの上に追加の入力テキストフィールドが表示されます。しかし、それは動作せず、コンソールに参照エラーが表示されています。Plnkrコントローラが動作しない

新鮮な角度で始めるので、私は少し初心者です。どんな助けも素晴らしいだろう。ありがとう！

http://plnkr.co/edit/EFF63kpjiSg3EPQa7tkz?p=preview

HTML

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

<head> 
    <script data-require="[email protected]*" data-semver="2.0.0" src="https://code.angularjs.org/2.0.0-snapshot/angular2.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
</head> 

<body ng-controller="MainController"> 
    <label for="question"> 
    Question: 
    <input type="text" class="form-control" placeholder="Type Question Here" /> 
    </label> 
    <br /> 
    <label for="answers"> 
    Correct Answers (optional): 
    <br /> 
    <button type="button" class="btn btn-success btn-default" ng-click="shortAnswer()">Add</button> 
    <button type="button" class="btn btn-danger btn-default" ng-click="shortAnswer()">Delete</button> 
    </label> 
    <br /> 
    <br /> 
    <label for="explanation"> 
    Explanation: 
    <input type="text" class="form-control" placeholder="Type Explanation Here" /> 
    </label> 
</body> 

</html>

// Code goes here 
    var app = angular.module("testViewer"); 

    var MainController = function($scope) { 


       scope.shortAnswer = function() { 

        $('.add').click(function() { 
         var label = 1; 
         $(".content2").append('<label for="' + label + '"><input type="text" class="form-control" placeholder=""></label>'); 
         label++; 
        }); 

        $(".content2").on("click", ".remove", function() { 
         $(this).parent().remove(); 
        }); 
       }; 
    }; 
    app.controller("MainController", MainController);

出典

2016-12-27 RyeGuy

angularjs 2と呼ばれる、あなたUserControllerでの角度

<script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>

とも最新のを使用しようとしている、あなたが注入する必要があります$場所と$ anchorScroll

Plunker：http://plnkr.co/edit/ASP5s8tq2Z4HSehktZJp?p=preview

編集：誤って間違ったリンクがOP

によって追加されたため、これにモジュール作成ラインを変更してください。

var app = angular.module("testViewer", []);

範囲は$スコープ

、あなたが結合事象のためのjQueryとの角度を混合している必要があります。このような角度定義方法では。ビューでコントローラ

 $scope.shortAnswer = function() { 

       // your functionality 

     };

で

 <button type="button" class="btn btn-success btn-default" ng-click="shortAnswer()">Add</button>

Plunker：http://plnkr.co/edit/0110aobLh7WmbafWigyU?p=previewは

出典

2016-12-27 13:51:12 Deep

私は間違った落下にリンクしました！しかし、そのソリューションは、私がそのソリューションにリンクさせようとしていたものでは機能しませんでした。何か案は？ – RyeGuy

@RyeGuyおっと、よろしくお願いします – Deep

@RyeGuyもう一度plunkerの答えを更新しました。 – Deep

あなたはjqueryのファイルが、使用jqueryの機能が含まれていませんでした。 angularjsファイル注入の上にJqueryファイルを含めます。

あなたはangularjs 1つのコードを使用しますが、角度のバージョンが問題を抱えている

出典

2016-12-27 13:50:41

jqueryファイルが含まれています。何もない。 – RyeGuy

最初にバージョンを変更してください。 –

anglejs 1コードを使用していますが、angularjs 2と呼ばれています。 –

"VM332がangular.js：8296 TypeError例外：$のtranscludeは関数ではありません"

エラー間違った方法でng-viewを実装したために来ています。は、あなたの現在のコードが動作しない理由を私はよく分からないhttps://docs.angularjs.org/api/ngRoute/directive/ngView

出典

2016-12-27 13:57:28

DOC- 読みますが、AngularJSのコンベンションはNG-ショーとngの非表示のディレクティブを使用することです。

HTML：

<button type="button" class="btn btn-success btn-default" ng-click="shortAnswer('add')">Add</button> 
<label for="lblName"><input type="text" class="form-control" placeholder="" ng-show="showLabel"></label>

はコントローラー：今すぐ

scope.shortAnswer = function (btnVal) { 
    if (btnVal == 'add') { 
     $scope.showLabel = true; 
    }

、私は、これは実際にそれを行うための最善の方法であることをわからないんだけど、私はあなたが両方のボタンがあなたを呼び出したいと仮定しますfunction shortAnswer（）

出典

2016-12-27 14:03:06

私は入力を感謝します。しかし、無限の数の入力要素を追加することができなければなりません。 – RyeGuy

私はそれがいくつかの微調整でまだ実行可能だと思いますが、それは乱雑になる可能性があり、あなたの実装は理にかなっています。なぜ私には分かりませんが、ここではAngularを使用している理由があります。コントローラーをさらに増やすことになりますか？あなたの質問はng-modelsにリンクされると思いますか？ –

Plnkrコントローラが動作しない

答えて

関連する問題