混合HTML标记和Angularjs

我在玩angularjs，遇到了数据绑定和HTML5的小问题

假设我有一个数组，表示图像和视频文件的混合：

  .controller('Foo', ['$scope', function($scope) {
  $scope.photos = [
    {
        Url: "img/2011-04-30\ 16.51.38.jpg",
    },
    {
        Url: "img/2011-04-30\ 16.51.53.jpg",
    },
    {
        Url: "img/2011-04-30\ 17.35.58.jpg",
    },
    {
        Url: "img/video-2011-04-30-16-52-23.mp4",
    },
    {
        Url: "img/video-2011-04-30-18-01-42.mp4",
    },
    {
        Url: "img/2011-04-30\ 16.51.47.jpg",
    },
    {
        Url: "img/2011-04-30\ 16.52.40.jpg",
    },
    {
        Url: "img/2011-04-30\ 18.02.26.jpg",
    },
    {
        Url: "img/video-2011-04-30-17-36-02.mp4",
    },
]}]);

我想把这个URL数组变成一个混合媒体幻灯片，所以我试图在数组上设置一个ng重复循环，并将数据绑定到

通过循环的每次迭代，我想要一个或一个，但不是两者都要。一个选项是在控制器中创建一个html标记数组，并将该数组用作ng repeat的源，但这会模糊视图和控制器之间的界限，这感觉不正确

---

有没有办法在Angularjs中以本机方式处理此问题？

一种不好的处理方法是检查url以查看扩展名

<div  ng-controller="Foo" ng-repeat = "photo in photos">
    <img ng-src="{{ photo.Url }}" class="photos" width="200" height="200" />
    <video src="{{ photo.Url }}" class="video" controls/>

如果你必须检查更多的扩展（例如：png，mp3等）类型，这将变得更加丑陋

因此，您也可以将逻辑移到控制器中的函数，但这仍然不是一个好方法。取而代之的是让您的模型进行适当的数据表示。根据mime类型向模型添加属性

<div  ng-controller="Foo" ng-repeat = "photo in photos" ng-init="isVideo=photo.Url.indexOf('.mpg') == photo.Url.length-4">
    <img ng-src="{{ photo.Url }}" class="photos" width="200" height="200" ng-if="!isVideo"/>
    <video src="{{ photo.Url }}" class="video" controls ng-if="isVideo" />

$scope.photos=[{//photos可能不是存储混合媒体列表的好名字
Url:“img/2011-04-30\16.51.38.jpg”，
键入：“图像”/惰性模式：

   $scope.photos = [{ //photos is probably not a good name for storing list of mixed medias
        Url: "img/2011-04-30\ 16.51.38.jpg",
        Type: 'image' //<-- add a property that exactly represents what type it is or just add a flag 
        isVideo: false
    },{
        Url: "img/2011-04-30\ 16.51.53.jpg",
        Type: 'video', 
        isVideo: true //<-- Derive this value based on some logic
    },


-1} }“class=“photos”width=“200”height=“200”/

或


-1} }“class=“photos”width=“200”height=“200”/
选项三：编写一个指令，根据URL的扩展名仅显示正确的标记

<div  ng-controller="Foo" ng-repeat = "photo in photos">
    <img ng-src="{{ photo.Url }}" class="photos" width="200" height="200" />
    <video src="{{ photo.Url }}" class="video" controls/>

例如：

<div  ng-controller="Foo" ng-repeat = "photo in photos">
  <img ng-src="{{ photo.Url }}" ng-if="!{{photo.Url.indexOf('jpg') > -1}}" class="photos" width="200" height="200" />
  <video src="{{ photo.Url }}" ng-if="!{{photo.Url.indexOf('mp4') > -1}}" class="video" controls/>
<div>



而js：

<div ng-controller="SlideController">
  <div ng-repeat="slide in data">
    <media-slide url="slide.Url"></media-slide>
  </div>
</div>

app.directive（'mediaSlide'，[function（）{
返回{
限制：'E'，
范围：{
url:“=”
},
链接：函数（范围、元素、属性、控制器）{
var updateTag=函数（）{
var parser=document.createElement（'a'）；
parser.href=scope.url；
var parts=parser.pathname.split（'.'）；
如果（parts.length我认为在名为
$scope的属性中存储名为
img/video-…mp4
的项目。照片
应该是一个标志，表明你的工作效率低下。你在中继器中有
项目
，在示波器上有
照片
。第二个选项是如果必须显示图像和视频，我将如何处理这个问题按元素顺序排列。否则，我会为每个元素创建一个单独的数组，并将它们显示在各自的转发器中。我取了一段实际代码，稍微更改了一些名称以便于发布，但在这样做的过程中，我遗漏了一些细节。这是我真正想要的概念。这些答案中提到的一些想法在任何t中都没有我看过的教程。这些都很有帮助。@PSL我很感激提到“坏方法”，因为这些概念在学习时似乎很容易被吸引。你的答案就是我想要的。谢谢。@Elsporko欢迎你。是的，这是我想提前提一下的，因为这样做很容易，有时我们会结束我们的谈话p忘记数据/视图模型的重要性：）请看一看指令，它有助于创建可重用的东西。@Elsporko还有一件你应该经常注意的关键事情，那就是不要在页面上有太多的手表，在你的示例中，ng repeat创建一个手表，每个重复块中的每个绑定都创建自己的手表，其中大多数你甚至不需要。如果您使用的是1.3 rc版本，那么对于较旧的版本，会有像bindonce这样的东西，在加载数据后会删除不需要的内容。照片的名称是mp4或vice versaI，我会尝试找到
endWith（）
函数，但JS不提供，所以这只是一种简单的方法
app.directive('mediaSlide', [function() {
  return {
    restrict: 'E',
    scope: {
      url: '='
    },
    link: function(scope, element, attrs, controllers) {
      var updateTag = function() {
        var parser = document.createElement('a');
        parser.href = scope.url;
        var parts = parser.pathname.split('.');
        if (parts.length<=1) {
          scope.extension = "";
          return;
        }
        scope.extension = parts[parts.length-1];
      }
      scope.$watch('url', updateTag);
      updateTag();
    },
    template: '<img ng-if="extension == \'jpg\'" ng-src="{{url}}" height="200" width="200"/>' +
              '<video ng-if="extension == \'mp4\'" src="{{url}}" height="200" width="200" controls/>' +
              '<span ng-if="extension == \'\'">{{url}}</span>'
  }
}]);