ng-show 在初始页面加载时无法正常工作

Question

所以我正在使用 html、css 和 Angular.js 制作网页，我想根据用户在下拉列表中选择的内容来显示页面。当用户选择他/她的选择时，“过滤器”工作得很好，但最初在加载页面时我无法显示整个页面内容，而是显示一个空白页面。

这是我的代码的 sn-p：

<select ng-model="selectedOption" ng-options="data.id as data.name for data in myData.categories"></select>
    <div class="main"  >
        <ul id="cbp-ntaccordion" class="cbp-ntaccordion" ng-repeat="data in myData.profiles" ng-show="selectedOption == data.category" >
            <li class="cbp-ntopen">
                <h3 class="cbp-nttrigger">{{data.name}}</h3>
                <div class="cbp-ntcontent">

我收到如下错误：

angular.js:13708Error: [ngRepeat:dupes] errors.angularjs.org/1.5.7/ngRepeat/dupes?

Answer 1

你可以使用 ng-value="defalutvalue" 所以你的代码是这样的

<select ng-model="selectedOption" ng-value="defalutvalue" ng-options="data.id as data.name for data in myData.categories"></select>
<div class="main"  >
    <ul id="cbp-ntaccordion" class="cbp-ntaccordion" ng-repeat="data in myData.profiles" ng-show="selectedOption == data.category" >
        <li class="cbp-ntopen">
            <h3 class="cbp-nttrigger">{{data.name}}</h3>
            <div class="cbp-ntcontent">

Answer 2

根据您提到的错误，我认为您并没有给 Angular 提供一种方法来弄清楚如何将您的对象标记为唯一。在ng-repeat 中使用track by 表达式。

所以你的ng-repeat 会变成：ng-repeat="data in myData.profiles track by $index"

请参阅 ngRepeat 文档的 Tracking and Duplicates 部分。

<ul id="cbp-ntaccordion" class="cbp-ntaccordion" ng-repeat="data in myData.profiles track by $index" ng-show="selectedOption == data.category">