Angular JS中的多个数据绑定

时间:2016-07-27 16:02:54

标签: angularjs json html5 css3

我是Angular的新手,想知道这样的事情是否可行:

我正在使用JSON调用每个故事的数据。单击故事后,我希望将其发送到Javascript,然后传递给另一个HTML div,即播放器div。

有办法吗?或者Angular不可能做到这一点?

例如:

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

 <div id="story-1" 
  class="play_button" 
  data-id="{id}" 
  data-title="{title}" 
  data-storyurl="{fullUrl}" 
  data-program="{program}" 
  data-programurl="{program.fullUrl}" 
  data-type="audio" 
  data-src="{soundcloudLink}" 
  data-item-type="story" 
  data-pub-date="{addedOn}" 
  data-excerpt="{excerpt}">
 </div>

 <div id="story-2" 
  class="play_button" 
  data-id="{id}" 
  data-title="{title}" 
  data-storyurl="{fullUrl}" 
  data-program="{program}" 
  data-programurl="{program.fullUrl}" 
  data-type="audio" 
  data-src="{soundcloudLink}" 
  data-item-type="story" 
  data-pub-date="{addedOn}" 
  data-excerpt="{excerpt}">
 </div>

<!--Here is where I would like the clicked data passed back to:-->

 <div id="player"> 
  <a href="{{story.Storyurl}}">{{story.Title}}</a>
  <a href="{{story.Programurl}}">{{story.Program}}</a>
 </div>

</body>

我如何创建变量以便显示点击故事中的数据?是否可以使用Angular的双向绑定?我希望他们按如下方式显示数据信息:

var app = angular.module('app', []);
 app.controller('storyCtrl', function($scope) {

  var story = [
     { 
         Id: 'data-id', 
         Title: 'data-title', 
         Storyurl:'data-storyurl', 
         Program: 'data-program',
         Programurl: 'data-programurl',
         Type: 'data-type',
         Src: 'data-src',
         Pubdate: 'data-pub-date',
         Excerpt: 'data-excerpt',
     },
  ];

  $scope.story = story; 

  });

0 个答案:

没有答案