Question

我正在玩angularjs并且遇到了数据绑定和HTML 5应该是一个微不足道的问题。

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

  .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",
    },
]}]);

我想将此网址数组转换为混合媒体幻灯片，因此我尝试在数组上设置ng-repeat循环，并将数据绑定到<img>和<video>标记。

显然这不会产生我想要的东西，但这是我的样本hg-repeat循环：

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

每次迭代循环我想要一个OR但不是两个。一种选择是在控制器中创建一个html标签数组，并使用该数组作为ng-repeat的来源，但这会模糊视图和控制器之间的界限，感觉不对。

有没有办法在Angularjs中本地处理这个？

Answer 1

处理的一个不好的方法是检查网址以查看扩展名。

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

如果你需要检查更多扩展名（例如：png，mp3等...）类型，这将变得更加丑陋。

所以你可以将逻辑移动到控制器中的一个函数，但是它仍然不是一个好方法。而是让您的模型完成正确的数据表示工作。根据mime类型为模型添加属性。

   $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
    },

并将其应用于您的观点。

更好的方法是让指令根据类型返回特定的模板。

Answer 2

选项三：编写一个指令，该指令仅根据URL的扩展名显示正确的标记。

例如：

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

和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>'
  }
}]);

View it on plnkr

任何时候你觉得你需要在视图中引入太多逻辑，指令可能是要走的路。

如果您在根据数据确定如何在视图中选择特定标记时遇到困难，那么大部分时间条件格式最好通过ng-show/ng-hide或ng-if完成。

Answer 3

懒惰模式：

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

或者

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

使用Angularjs混合HTML标记

3 个答案: