在 angular js 中向静态列表添加新项目并自动刷新

Question

我想根据以下代码显示图像：

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
        }
    );
};
}]);

默认图像加载良好。但是，我想根据代码中给出的相机上传的图像将另一张图像添加到列表中，然后自动将其刷新到页面。

我已经按照代码中给出的方法进行了尝试，但是没有用。请帮忙。

编辑：

这是html代码

            <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>

Answer 1

我假设您需要替换推送命令：

$scope.pictures.push(image);

如果这不起作用，请粘贴正在执行循环的 HTML 代码。如果您以一种方式（使用 ::）绑定它，这可能来自那一点

编辑：

这是我从 Cordova 获取图片的方式，我的查询与您的有点不同...请验证您的

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);
});

在 angular js 中向静态列表添加新项目并自动刷新

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

angularjs

onsen-ui