在Angularjs中显示数组中的图像

时间:2017-02-04 07:45:59

标签: angularjs

图像路径存储在数据库中,我从http请求中获取它们。 数据采用数组格式。

示例数据:

{"success":true,"img":["portfolio_img\/40306762187.jpg","portfolio_img\36272080187078.jpg","portfolio_img\/36211374209814.jpg","portfolio_img\/36272058183542.jpg"]} 

我想在html页面中显示这些图片。

这是http请求代码。

var formApp = angular.module('formApp', []);

formApp.controller('getprofile', function($scope,$http){
     $http({
                            url: 'get_pics.php',
                            method: "GET",
                            params: {uid: uid}
                         })
                    .success(function(data) {

                        if (data.success) {

            //forEach($scope.data,function(value,index){
             //   alert(value.img);
            //})                           
                        }
                    });
                     })

HTML代码就在这里。

<div ng-controller ="getprofile">
<div class="row"><div id="grid">
<fieldset ng-repeat="choice in choices"> (Need to modify)
<div class="col-xs-3 thumbnail">
<img src="" ng-src="{{imageUrl}}" ng-model="choice.course">(Need to modify)
</div>
</fieldset>
</div></div>
   </div>

我还在处理代码问题。所以,应该有一些错误和拼写错误。

1 个答案:

答案 0 :(得分:0)

试试这个,

        using (Screen context = WebServiceConnector.InitializeWebService())
        {
            try
            {
                AR303000Content customerSchema = context.AR303000GetSchema();

                // ATTEMPT #1: Tried setting the CustomerID field name to "AcctCD!EMail"
                customerSchema.CustomerSummary.CustomerID.FieldName += "!" + customerSchema.GeneralInfoMainContact.Email.FieldName;

                // ATTEMPT #2: Tried setting the CustomerID field name to "AcctCD!Contact__eMail"
                //customerSchema.CustomerSummary.CustomerID.FieldName = "AcctCD!Contact__eMail";

                // Tried COMMIT = true and false
                customerSchema.CustomerSummary.CustomerID.Commit = false;

                // Left as default and tried "ID"
                customerSchema.CustomerSummary.CustomerID.Value = "ID";

                var commands = new List<Command>()
                {
                    new Value
                    {
                    Value = customer.Email,
                    LinkedCommand = customerSchema.CustomerSummary.CustomerID
                    },
                    new Value
                    {
                    Value = customer.Name,
                    LinkedCommand = customerSchema.CustomerSummary.CustomerName
                    },
                    new Value
                    {
                    Value = customer.Class,
                    LinkedCommand = customerSchema.GeneralInfoFinancialSettings.CustomerClass
                    },
                    new Value
                    {
                    Value = customer.Email,
                    LinkedCommand = customerSchema.GeneralInfoMainContact.Email
                    },
                    new Value
                    {
                    Value = customer.CountryCode,
                    LinkedCommand = customerSchema.GeneralInfoMainAddress.Country
                    },
                    customerSchema.Actions.Save,
                    customerSchema.CustomerSummary.CustomerID
                };

                c = context.AR303000Submit(commands.ToArray())[0];

            }
            catch (Exception e)
            {
            }
            finally
            {
                context.Logout();
            }
        }

在HTML中

 var formApp = angular.module('formApp', []);

 formApp.controller('getprofile', function($scope,$http){
 $http({
                        url: 'get_pics.php',
                        method: "GET",
                        params: {uid: uid}
                     })
                .success(function(data) {

                    if (data.success) {

                      angular.forEach(data,function(value,index){ // Angular foreach
                        $scope.images = data.img; // data in images scope variable.
                      })                           
                    }
                });
                 })