-1

对不起，这是我的新问题，以前有一个问题是用新问题编辑这个..

这是我的新问题我已经创建了一个带有滑块的图像弹出窗口，在单击图像库中的一个图像时，我需要在弹出窗口和滑块中显示特定图像，我使用 NgFor 作为图像库，在弹出窗口期间我使用另一个 ngFor滑块，我需要可点击的图像 id 并在弹出窗口中显示特定的图像，我正在使用 ngrx-store 这是我的代码，

 <div class="swiper-slide " *ngFor="let picture of pictures; let i = index">
        <div class="zoomImage" >
            <img class="img-fluid GridImage" 
                 (click)="lgModal.show()"
                 src="{{picture.regularUrl}}">
        </div>
    </div>

    <div *ngIf="pictures.length%2 !=0" class="swiper-slide ">
        <!--<img  class="img-fluid GridImage"-->
        <!--src="../../assets/images/dummy-image.jpg" />-->
        <img class="img-fluid GridImage"
             src="http://dev.rileyblakedesigns.com/media/productimage-
    picture-c120-lightgray-27516.jpg"/>
    </div>
<!--</swiper>-->

<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1"
     data-a8n="popUp OverLay" id="backgroundPopUp"
     role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <button type="button" class="close pull-right"
            data-a8n="PopUp Close Button" id="popCloseBtn"
            (click)="lgModal.hide()" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>

    <carousel [interval]="'false'" [noWrap]="'true'" id="thumbChange" >
        <div style=" " class="closeDiv"
             (click)="lgModal.hide()" >
            <div class="modal-dialog modal-lg">

               <div class="modal-content" >
                  <div class="modal-body">
                    <slide *ngFor="let picture of pictures; let i = index" >
                        <div >
                            <img class="img-fluid popUpImage" 
                                 src="{{picture.regularUrl}}" >
                            <div class="pull-right imageCount"
                                 ">
                                <h6 class="countPic" >{{i+1}} of {{ 
                          pictures.length}}</h6>
                            </div>
                        </div>
                    </slide>
                  </div>
               </div>
            </div>

        </div>

        <div class="PopUp-Thumbnail"  data-a8n="PopUp-Thumbnail"
             style="">
            <span *ngFor="let picture of pictures; let i = index" >
                <img class="img-fluid GridImagePopUp active" 
          id="thumbnailImage"
                src="{{picture.thumbnailUrl}}">
        </span>
        </div>

    </carousel>

</div>
4

2 回答 2

0

如果是基本 HTTP 授权，这应该对您进行身份验证。

var App= angular.module('myApp',[]);
App.controller('MainCtrl', function ($scope ,$http) {
    $scope.userName ="usern";
    $scope.password ="pass";

    $http({
        method :'GET',
        url:' paste url here',
        headers: {'Content-Type': 'application/json','Authorization':'Basic '+btoa($scope.userName+':'+$scope.password)}
    }).success(function (data, status, headers, config) 
{
        console.log('status',status);

        console.log('data',data);
        console.log('headers',headers);
    });
});
于 2016-09-03T19:08:06.500 回答
0

而不是“数据”尝试使用这样的“参数”：

var App= angular.module('myApp',[]);
App.controller('MainCtrl', function ($scope ,$http) {
    $scope.userName ="usern";
    $scope.password ="pass";

    $http({
        method :'GET',
        url:' paste url here',
        params: { username :  $scope.userName , password: $scope.password},

        headers: {'Content-Type': 'application/json'}
    }).success(function (data, status, headers, config) 
{
        console.log('status',status);

        console.log('data',status);
        console.log('headers',status);
    });
});

这就是它应该如何工作的方式。见这里https://docs.angularjs.org/api/ng/service/$http#usage

于 2016-09-03T16:06:04.120 回答