角上的不同模板

时间:2015-02-10 12:06:54

标签: angularjs

在我的HTML代码中,我想显示图片库或只显示一张图片......模板不同:

if (mode = 0) {

  <div data-ng-controller="ImageController" class="gallery">

    <div data-ng-repeat='image in model.images'>
      <img data-ng-src="image.Url"/>
      // Some more code
    </div>

  </div>

} else {

  <div data-ng-controller="ImageController" class="image">
    <img src="data-ng-src="{image.Url}" />
    // Other code
  </div>

}

在角度控制器上,我有以下内容:

application.controller('ImageController', function ImageController($scope, ImageService) {

  $scope.model = {
    images: []
  }

  var init = function () {
     ImageService.GetList($scope.model.pages.instagram)
      .success(function (data, status, headers, config) {
        $scope.model.images = $scope.model.images.concat(data.Images);
  })
  .error(function (data, status, headers, config) { });

}

如何修改控制器以显示图像列表或单个图像?

1 个答案:

答案 0 :(得分:0)

<强> HTML

  <script type="text/javascript">
     window.isMultiple = '@RazorIsMultiple';
  </script>


<div data-ng-controller="ImageController" class="gallery">
  <!--<input type="hidden" data-ng-model="mode.isMultiple" value="@RazorIsMultiple"/>-->
  <div data-ng-if="mode.isMultiple" data-ng-repeat='image in model.images'>
    <img data-ng-src="image.Url"/>
    // Some more code
  </div>

  <img data-ng-if="!mode.isMultiple" src="data-ng-src="{image.Url}" />
    // Other code
</div>

并在您的控制器中添加类似的内容:

在控制器初始化期间

$scope.mode = {};
//$scope.$watch('mode.isMultiple', function(newVal, oldVal){
//     //insert your logic here
//});
$scope.mode.isMultiple = window.isMultiple;