>>>>I am trying to replicate the form we have in VFP although in that form we didn't display images in the grid.
>>>
>>>Guess it should be OK - assuming that your image data is stored as base64 (or is being converted when creating the model). Do you intend to use any paging strategy ?
>>
>>I didn't implement any paging, but I may consider using 30 days instead of all 366. Right now my table is scarcely populated, so the page loads relatively quickly.
>
>Don't know the context but sounds like some sort of calendar based page? If so then, unless you intend showing the whole year on one screen (which probably wouldn't even be feasible on a tablet), paging by month sounds more user-friendly....


UPDATE. Solved this problem by using ng-src instead of src.

Hi Viv,

Something is not entirely right. Even though the page displays OK, I see the following in the console window:

[dailyCodesCrudController] Loading Daily codes. PageNumber=1
angular.js:13920 [dailyCodesService] Getting all records for page number=1
%7B%7BgetImageData(row.dailyPict,%20row.p1Caption)%7D%7D:1 GET http://localhost:9753/SiriuswareControl/%7B%7BgetImageData(row.dailyPict,%20row.p1Caption)%7D%7D 404 (Not Found)

Also, these errors seem to show before I hit the API controller's code. So, somehow that image source evaluation is happening before the row is being created in my grid and getting its data.

The page html is the following:

<ng-form name="editDailyCodesForm">
    <div class="form-horizontal" ng-cloak ng-show="finishedLoading">
        <div class="form-group">
            <table class="table table-responsive table-hover table-list" id="tableDailyCodes">
                <thead>
                    <tr>
                        <th>@Labels.date</th>
                        <th>@Labels.code 1</th>
                        <th>@Labels.picture 1</th>
                        <th>@Labels.code 2</th>
                        <th>@Labels.picture 2</th>
                        <th>@Labels.code 3</th>
                        <th>@Labels.picture 3</th>
                        <th>@Labels.code 4</th>
                        <th>@Labels.picture 4</th>
                    </tr>
                </thead>
                <tr ng-repeat="row in selections.dailyCodes" ng-form="formRow">
                    <td>{{row.monthDay}}</td>
                    <td class="col-md-1">
                        <input type="text" name="dailyCode1" id="dailyCode1"
                               class="form-control"
                               ng-model="row.dailyCode"
                               ng-maxlength="40" />
                        <div class="field-validation-error">
                            <span ng-show="formRow.dailyCode1.$error.maxlength && formRow.dailyCode1.$dirty">
                                @String.Format(Messages.cannotExceed, Labels.daily + " " + Labels.code + "1", "40")
                            </span>
                        </div>
                    </td>
                    <td>
                        <span ng-if="row.p1Caption!=''">
                           <span><img height="32" width="32"
                                 alt="{{row.p1Caption}}"
                                 title="{{row.p1Caption}}"
                                 src="{{getImageData(row.dailyPict, row.p1Caption)}}" /></span>
                            <span><i class="fa fa-times-circle redText"                                      
                                     title="@Labels.removeImage"
                                     modal-popup
   cancel-label="@Labels.cancel" ok-label="@Labels.removeImage"
   modal-message="'@String.Format(Messages.confirmDelete, Labels.image)'"
   modal-title="@Labels.removeImage"   
   ok-action="removeImage(row, 1)"></i>
</span></span>
        @*<i class="fa fa-picture-o" sm-file-uploader-modal
        ok-label="@Labels.doneUploading" error-message="errorMessage"
        cancel-label="@Labels.cancel" upload-options="imageUploadOptions"
        upload-template="~/app/templates/fileUploader"
        upload-title="Select image to Upload"
        file-mask="'image/*'"
        show-drop-zone="true"
           title="@String.Format(Labels.selectX, Labels.image)"></i>*@                        
                    </td>

td tags are repeated for other 3 * 2 columns.