1

我是 Angular 的新手，想知道如何解决以下情况。我正在使用 angular 和 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>
4

1 回答 1

3

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">
于 2013-10-23T16:12:10.043 回答