AngularJS構文の詳しい説明_AngularJS-jsチュートリアル-php.cn

テンプレートとデータの基本的な操作プロセスは次のとおりです:

ユーザーがアプリケーションの開始ページをリクエスト
ユーザーのブラウザはサーバーへの http 接続を開始し、テンプレート
を含むindex.html ページをロードします。 Angular はページにロードされ、ページがロードされるのを待ち、テンプレート
の境界を定義するために使用される ng-app ディレクティブを探します。 Angular はテンプレートを走査して、指定されたバインディング関係を見つけます。これにより、リスナーの登録、一部の DOM 操作の実行、サーバーからの初期化データの取得という一連のアクションがトリガーされます。最後に、アプリケーションが起動し、テンプレートを DOM ビューに変換します
サーバーに接続して、ユーザーに表示する必要がある他のデータをロードします

テキストを表示

1 つは {{greeting}} などの {{}} フォームを使用し、2 番目は ng-bind="greeting"

レンダリングされていないページは最初の方法を使用します。インデックスページには 2 番目の方法を使用することをお勧めします。

フォーム入力

コードをコピーしますコードは次のとおりです:

場合によっては、変化があったときにすぐに行動を起こしたくない場合もありますが、待つ必要があります。例:

コードをコピーしますコードは次のとおりです:

<頭>
フォーム

<スクリプトタイプ="text/javascript">
関数 StartUpController($scope) {
$scope.funding = {startingEstimate:0};
computeNeeded = function() {
$scope.funding.needed = $scope.funding.startingEstimate * 10;
};
$scope.$watch('funding.startingEstimate',computeNeeded);//watch は式を監視し、式が変化するとコールバック関数が呼び出されます
$scope.requestFunding = function() {
window.alert("申し訳ありませんが、まず顧客を増やしてください。")
};
}

非表单提交型のやり取り、クリックして例を表示します

复制代代码如下:

<頭>
    表单

    <スクリプトタイプ="text/javascript">
    function StartUpController($scope) {
        $scope.funding = {startingEstimate:0};
        computeNeeded = function() {
            $scope.funding.needed = $scope.funding.startingEstimate * 10;
        };
        $scope.$watch('funding.startingEstimate',computeNeeded);
        $scope.requestFunding = function() {
            window.alert("申し訳ありませんが、まず顧客を増やしてください。")
        };
        $scope.reset = function() {
            $scope.funding.startingEstimate = 0;
        };
    }

列表、表格およびその他の代型要素

ng-repeat は、$index を介して、現在参照されている要素シーケンス番号を返します。コードの例は次のとおりです。

复制代代码如下:

<頭>
    表单

    <スクリプトタイプ="text/javascript">
    var students = [{name:'Mary',score:10},{name:'Jerry',score:20},{name:'Jack',score:30}]
    function StudentListController($scope) {
        $scope.students = 学生;
}

隐藏与显示

ng-show と ng-hide の機能は同等ですが、実行効果はむしろ優れています。

复制代码代码如下:

<頭>

<スクリプト>
function DeathrayMenuController($scope) {
$scope.menuState = {show:false};//ここでmenuState.show = falseに変更するとエフェクトは表示されなくなります。将来的には、変数を {}
内で宣言することをお勧めします。 $scope.toggleMenu = function() {
$scope.menuState.show = !$scope.menuState.show;
};
}