我可以在 ng 中继器上使用 ng-if 吗?

我是角度的新手，想知道如何处理以下情况。我正在将角度与jquery移动一起使用，并且正在创建一个单页应用程序。当应用程序加载时，我让它在正文标签内创建页面或div。我有两种类型的页面，"典型页面"和"视频页面"，但我想使用一个对象来创建两种页面类型。我想使用一个对象，因为我也使用该对象来创建我的菜单，并且我不想编辑多个对象。

我的问题是，我想为对象中的每个元素创建一个"典型页面"，但我只想为每个没有"videoPage：false"的对象创建一个"视频页面"。我尝试在"视频页面"ng中继器上使用ng-if（见下面的html），但它似乎不起作用。我可以在 ng 中继器上使用 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>

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">

相关内容

最新更新

热门标签：