Question

我是棱角分明的新手，想知道如何解决以下问题。我正在使用角度与jquery mobile，我正在创建一个单页应用程序。当应用程序加载时，我让它在body标签内创建页面或div。我有两种类型的页面，“典型页面”和“视频页面”，但我想使用一个对象来创建两种页面类型。我想使用一个对象，因为我也使用该对象来创建我的菜单，我不想编辑多个对象。

我的问题是，我想为对象中的每个元素创建一个“典型页面”，但我只想为每个没有“videoPage：false”的对象创建一个“视频页面”。我尝试在“视频页面”ng-repeater上使用ng-if（参见下面的html），但它似乎没有用。我可以在ng-repeater上使用ng-if吗？

我有以下数据/对象：

function App($scope){
    $scope.pages = [
        {
            id: "intro",
            title: "Intro",
            videoPage: false
        },{
            id: "activeStretches",
            title: "Active Stretches by Area"
        },{
            id: "passiveStretches",
            title: "Passive Stretches by Area"
        }
    ];
}

和html：

<body ng-app ng-controller="App">

    <div data-role="page" id="{{page.id}}" ng-repeat="page in pages">
        <div data-role="header" data-theme="h">
            <a data-rel="back" data-icon="arrow-l">Back</a>
            <h1>{{page.title}}</h1>
        </div>
        <div data-role="content">
            <div class="content-side">
                <ul data-role="listview" data-inset="true">
                    <li ng-repeat="menu in pages" data-theme="{{menu.title == page.title && 'h'}}">
                        <a href="{{menu.id}}" class="{{menu.class}}">{{menu.title}}</a>
                    </li>
                </ul>
                <div class="logo"></div>
            </div>
            <div class="content-main">
                Typical Page
            </div>
        </div>
    </div>

    <div data-role="page" id="{{page.id}}Video" ng-repeat="page in pages" ng-if="page.videoPage">
        <div data-role="header" data-theme="h">
            <a data-rel="back" data-icon="arrow-l">Back</a>
            <h1 class="vidTitle"></h1>
        </div>
        <div data-role="content">
            <div class="content-side">
                <ul data-role="listview" data-inset="true">
                    <li ng-repeat="menu in pages" data-theme="{{menu.title == page.title && 'h'}}">
                        <a href="{{menu.id}}" class="{{menu.class}}">{{menu.title}}</a>
                    </li>
                </ul>
                <div class="logo"></div>
            </div>
            <div class="content-main">
                Video Page
            </div>
        </div>
    </div>

</body>

Answer 1

ng-if从1.1.15开始是新的，所以请确保您使用的是Angular的新版本（目前不稳定）。

而且，是的，您可以将ng-if与ng-repeat混合使用。这是一个显示它在行动的小提琴（使用1.2）：http://jsfiddle.net/rbQry/1/

注意这一行（将ng-if切换为“true”并重复返回）：

   <li ng-repeat="phone in phones | filter:query" ng-if="false">

我可以在ng-repeat上使用ng-if吗？

1 个答案: