CODEWITHSUNDEEP
angularjsonsen-ui
khmerbridge
khmerbridge

Reputation: 25

Add a new item to static list and auto refresh in angular js

I want to display image based on the following codes:

app.controller('PostingCtrl', ['$scope','$http', '$q', function($scope, $http, $q) {

// Set of Photos
$scope.pictures = [
    {src: 'images/sample1.jpg', desc: 'Sample Image 01'},
    {src: 'images/sample2.jpg', desc: 'Sample Image 02'},
    {src: 'images/sample3.jpg', desc: 'Sample Image 03'}
];

// initial image index
$scope._Index = 0;

// if a current image is the same as requested image
$scope.isActive = function (index) {
    return $scope._Index === index;
};

// show a certain image
$scope.showPhoto = function (index) {
    $scope._Index = index;
};    

$scope.onCameraUpload = function() {
    navigator.camera.getPicture(
        function(imageInfo) {
            var image = {src: imageInfo, desc: 'none'};
            $scope.pictures.push.apply($scope.pictures, image);
        },
        function(message) {
            alert('Failed because: ' + message);
        },
        {
            quality: 50,
            sourceType : Camera.PictureSourceType.CAMERA
        }
    );
};
}]);

The default images are loading well. However, I want to add another image to the list based on the image from camera upload given in the code and then automatically refresh it to the page.

I have tried as given in the code, but it did not work. Please help.

Edit:

Here is the html code

            <section style="padding: 0 8px">
            <!-- slider container -->
            <div class="container slider">
                <!-- enumerate all photos -->
                <img ng-repeat="picture in pictures" class="slide" ng-swipe-right="showPrev()" ng-swipe-left="showNext()" ng-show="isActive($index)" ng-src="{{picture.src}}" />        
                <!-- extra navigation controls -->
                <ul class="nav">
                    <li ng-repeat="picture in pictures" ng-class="{'active':isActive($index)}">
                        <img src="{{picture.src}}" alt="{{picture.desc}}" title="{{picture.desc}}" ng-click="showPhoto($index);" />
                    </li>
                </ul>        
            </div>
        </section>

        <section style="padding: 0 8px 8px">
            <ons-button modifier="normal" ng-click="onCameraUpload()" style="float: right; width: 48.5%;">
                <ons-icon icon="camera"></ons-icon> Camera Upload
            </ons-button>
        </section>

Upvotes: 0

Views: 1308

Answers (1)

aorfevre
aorfevre

Reputation: 5064

I assume that that you need to replace your push command :

$scope.pictures.push(image);

If this is not working, please paste your HTML code taht is doing your loop. This may be coming from that point if you binded it one way (with ::)

EDIT :

Here is how I get pictures from Cordova, my query is a bit different from yours... please verify yours

var options = {
	quality: 50,
	destinationType: Camera.DestinationType.NATIVE_URL,
	sourceType: Camera.PictureSourceType.CAMERA,
	allowEdit: false,
	encodingType: Camera.EncodingType.JPEG,
	targetWidth: 700,
	targetHeight: 700,
	popoverOptions: CameraPopoverOptions,
	saveToPhotoAlbum: false,
	correctOrientation: true
};

$cordovaCamera.getPicture(options).then(function(imageData) {
	d.resolve(imageData);
}, function(err) {
	d.reject(err);
});

Upvotes: 1

Related Questions