离子"跟踪"火种卡错误

时间:2016-01-16 13:48:29

标签: ionic-framework tinder

我2周前开始学习Ionic,现在我正在创建一个小项目来练习。你可以从我的Github下载我的项目:https://github.com/KaanYildirim/ionicTest

我正在尝试使用从离子团队本身创建的卡片。 (https://github.com/driftyco/ionic-ion-tinder-cards

我已经尝试了所有可能的解决方案"追踪"表达式,但我仍然收到此错误:

错误:[ngRepeat:dupes]不允许在转发器中重复。使用'跟踪'表达式以指定唯一键。 Repeater:card in card track by card.id,Duplicate key:undefined,Duplicate value:undefined

我试图通过"跟踪$ index"来修复此错误并且"通过card.id跟踪#34;(每张卡片在.Json文件中都有" id"属性)但它没有奏效。我想我犯了一个小错误而无法找到它。

有人可以帮帮我吗?感谢

的index.html:



 	  <td-cards>
      <td-card ng-repeat="card in cards track by card.id" on-destroy="cardDestroyed($index)" on-swipe="cardSwiped($index)">
        <div class="list card myCard">

          <!-- Card Header-->
          <div class="item topicDescription cardHeader">
             <p>{{card.topicDescription}}</p>
          </div>

          <!-- Card Body-->
          <div class="item item-body noBorder">
            <img class="full-image" src="{{card.image}}">
            <h3 class="cardTitle">{{card.title}}</h3>
            <p>{{card.summary}}</p>  
          </div>

          <!-- Card Footer-->
          <div class="item tabs tabs-secondary tabs-icon-left cardFooter">
             <a class="tab-item" ng-click="readMore($index)" href="#">
                 <i class="{{card.actionButtonIcon}}"></i>
                 {{card.actionButtonText}} {{card.type}} ( {{card.additionalInfo}} )
             </a>

             <a class="tab-item" ng-click="share($index)" href="#">
                <i class="icon ion-share"></i>
                Share
              </a>
          </div>
        </div>
      </td-card>
    </td-cards>
&#13;
&#13;
&#13;

      

    

Json文件:

&#13;
&#13;
{
  "articles": [
    {
      "id":1,
      "topicDescription": "Find a Idea",
      "image": "img/uber.jpg",
      "title": "Uber Lowers Fares In Over 100 Cities",
      "summary": "Uber is lowering prices in over 100 U.S. and Canadian cities, effective tomorrow. January is a slower month for the car service and the company says it is reducing fares in order to increase demand.",
      "link": "http://techcrunch.com/2016/01/08/uber-lowers-fares-in-over-100-cities/",
      "actionButtonIcon": "icon ion-ios-glasses-outline",
      "actionButtonText": "Read",
      "type":"Article",
      "additionalInfo": "3 min"
    },
    {
      "id":2,
      "topicDescription": "Test a Idea",
      "image": "img/lean.jpg",
      "title": "The Lean Startup",
      "summary": "Great book about startups and how to validate your idea without spending to much money and time.",
      "link": "http://www.amazon.de/Lean-Startup-Innovation-Successful-Businesses/dp/0670921602/ref=sr_1_2?ie=UTF8&qid=1452779528&sr=8-2&keywords=the+lean+startup",
      "actionButtonIcon": "icon ion-ios-bookmarks-outline",
      "actionButtonText": "Buy",
      "type":"Book",
      "additionalInfo": "Amazon"
    },
    {
      "id":3,
      "topicDescription": "Build",
      "image": "img/evernote.jpg",
      "title": "Note Taking App",
      "summary": "From short lists to lengthy research, no matter what form your writing takes, Evernote keeps you focused on moving those ideas from inspiration to completion.",
      "link": "https://evernote.com/?var=3",
      "actionButtonIcon": "icon ion-hammer",
      "actionButtonText": "Download",
      "type":"App",
      "additionalInfo": "App Store"
    },
    {
      "id":4,
      "topicDescription": "Measure",
      "image": "img/steve.jpg",
      "title": "Steve Blank: How to Build a Great Company",
      "summary": "Join Silicon Valley serial entrepreneur-turned-educator Blank in a lively discussion with Dan'l Lewin of Microsoft. This program will introduce best practices, lessons and tips that have swept the startup world, offering a wealth of proven advice and information for entrepreneurs of all stripes.",
      "link": "https://www.youtube.com/watch?v=1RTcXwJuCaU",
      "actionButtonIcon": "icon ion-ios-videocam-outline",
      "actionButtonText": "Watch",
      "type":"Video",
      "additionalInfo": "Youtube"
    },
    {
      "id":5,
      "topicDescription": "Find a Idea",
      "image": "img/uber.jpg",
      "title": "Uber Lowers Fares In Over 100 Cities",
      "summary": "Uber is lowering prices in over 100 U.S. and Canadian cities, effective tomorrow. January is a slower month for the car service and the company says it is reducing fares in order to increase demand.",
      "link": "http://techcrunch.com/2016/01/08/uber-lowers-fares-in-over-100-cities/",
      "actionButtonIcon": "icon ion-ios-glasses-outline",
      "actionButtonText": "Read",
      "type":"Article",
      "additionalInfo": "3 min"
    },
    {
      "id":6,
      "topicDescription": "Test a Idea",
      "image": "img/lean.jpg",
      "title": "The Lean Startup",
      "summary": "Great book about startups and how to validate your idea without spending to much money and time.",
      "link": "http://www.amazon.de/Lean-Startup-Innovation-Successful-Businesses/dp/0670921602/ref=sr_1_2?ie=UTF8&qid=1452779528&sr=8-2&keywords=the+lean+startup",
      "actionButtonIcon": "icon ion-ios-bookmarks-outline",
      "actionButtonText": "Buy",
      "type":"Book",
      "additionalInfo": "Amazon"
    },
    {
      "id":7,
      "topicDescription": "Build",
      "image": "img/evernote.jpg",
      "title": "Note Taking App",
      "summary": "From short lists to lengthy research, no matter what form your writing takes, Evernote keeps you focused on moving those ideas from inspiration to completion.",
      "link": "https://evernote.com/?var=3",
      "actionButtonIcon": "icon ion-hammer",
      "actionButtonText": "Download",
      "type":"App",
      "additionalInfo": "App Store"
    },
    {
      "id":8,
      "topicDescription": "Measure",
      "image": "img/steve.jpg",
      "title": "Steve Blank: How to Build a Great Company",
      "summary": "Join Silicon Valley serial entrepreneur-turned-educator Blank in a lively discussion with Dan'l Lewin of Microsoft. This program will introduce best practices, lessons and tips that have swept the startup world, offering a wealth of proven advice and information for entrepreneurs of all stripes.",
      "link": "https://www.youtube.com/watch?v=1RTcXwJuCaU",
      "actionButtonIcon": "icon ion-ios-videocam-outline",
      "actionButtonText": "Watch",
      "type":"Video",
      "additionalInfo": "Youtube"
    }
  ]
}
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

我检查了你的code。在您的controllers.js文件中,您通过手动将未定义的卡添加到列表中来处理cardSwiped事件

$scope.cardSwiped = function(index) {
        var newCard = // new card data
         $scope.cards.push(newCard);
    };

这会导致您的卡片有多个未定义的元素,ng-repeat将被强制作为重复处理。删除/修复该处理程序,事情应该有效。

顺便说一句,这段代码将正常工作,因为javascript会将它们作为单行处理var newCard = $scope.cards.push(newCard);这意味着在函数结束时你的newCard变量将具有新的卡片数组长度。