1

ng-repeat 内で ng-if を使用しようとしましたが、ng-if が正しく機能していないようです。

StackOverflow でいくつかのフォーラム リンクを参照しましたが、役に立ちません。

angularバージョン1.3.0を使用しています

HTML

<!DOCTYPE html>
<html ng-app="myModule">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <script src="/js/lib/angular-1.3.0/angular.js"></script>
        <script src="/js/lib/controllers/ifRepeatController.js"></script>
    </head>
    <body>

     <div ng-repeat = "data in comments">
      <div ng-if="data.type == 'hootsslllll' ">
          //differnt template with hoot data
       </div>
      <div ng-if="data.type == 'story' ">
          //differnt template with story data
       </div>
       <div ng-if="data.type == 'article' ">
          //differnt template with article data
       </div> 
     </div>
    </body>
</html>

コントローラ

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


myIfRepeat.controller('IfRepeatController', function ($scope,$http) {

     $scope.comments = [
            {"_id":"1",
               "post_id":"1",
               "user_id":"UserId1",
               "type":"hoot"},  
            {"_id":"2",
               "post_id":"2",
               "user_id":"UserId2",
               "type":"story"},        
            {"_id":"3",
               "post_id":"3",
               "user_id":"UserId3",
               "type":"article"}
          ];

});

最初の条件に従って、最初の行は表示されるべきではありませんが (詳細については、以下のスクリーンショットを参照してください)、行は表示されています。

参照リンク: Using ng-if inside ng-repeat?

Ng-If

今、アドバイスに従ってdivにコントローラーを追加しましたが、同じ問題に直面しています

以下に、参照用のスクリーンショットを示します。この問題を解決する方法を教えてください。さらに説明が必要な場合はお知らせください。

コントローラー付きの新しいスクリーンショット

以下は、angular 1.3 バージョンを使用した作業モデルのスクリーンショットです。angular 1.0.2 を使用すると、nf-if が正しく機能しません (以下のスクリーンショットを参照)。

ワーキングモデルのスクリーンショット

angularバージョン1.0.2のスクリーンショット

ここに画像の説明を入力

4

4 に答える 4

4

この作業に問題はありません。フィドルに収まるようにコードを微調整しました

<div ng-app ng-controller="IfRepeatController">
    <div ng-repeat="data in comments">
        <div ng-if="data.type == 'hootsslllll' ">type={{data.type}}//differnt template with hoot data</div>
        <div ng-if="data.type == 'story' ">type={{data.type}}//differnt template with story data</div>
        <div ng-if="data.type == 'article' ">type={{data.type}}//differnt template with article data</div>
    </div>
</div>

function IfRepeatController($scope) {
    $scope.comments = [{
        "_id": "1",
            "post_id": "1",
            "user_id": "UserId1",
            "type": "hoot"
    }, {
        "_id": "2",
            "post_id": "2",
            "user_id": "UserId2",
            "type": "story"
    }, {
        "_id": "3",
            "post_id": "3",
            "user_id": "UserId3",
            "type": "article"
    }];
}

注:ここで angular 1.3.0 を参照してください: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js

于 2014-05-01T18:18:21.007 に答える
0

これはAngularJsのバージョンの問題ではありませんvariableValue。ブール値があれば正常に動作します。

次のようなサンプル コード:

$scope.variableValue = true; in Controller

"<"div ng-if="!variableValue" ">"Don't show content"<"/div">"// This DIV doesn't show the content 
"<"div ng-if="variableValue" ">"show content"<"/div">"  // This DIV will show the content
于 2014-09-30T01:43:22.510 に答える
0

同様の問題があります。ng-if を正しく動作させることができません。それを機能させる唯一の方法は、ng-if を not 演算子 (ng-if="!variableValue") に評価することです。これは AngularJS のバージョンの問題ですか?

于 2014-09-29T20:59:34.317 に答える