I have been trying to get this to work for a few days, So I tried my best to put a code pen together of just this page. I dont use codepen much but it displays correctly you just cant scroll down?not a big issue , you can see all the code , CodePen.
What I need is to be able to take mulitple pictures, display them, and have them dynamically created with the form, as I need Pictures per Unit. The issues im having is when I hit the take picture button, the getphoto() is suppose to push a new value into Pic1. but when I try to display with ng-src=input.Pic1 (input.Pic1 because I have an ng-repeat=input in inputs) It doesnt display the image but If I use ng-src=inputs.Pic1 , the picture displays, but will also display on any other form created.
Thank you for any assitance or direction in the right way, This is my first angular project,
For a quick glance here are some snippetsof the code sections
buttons and image display in html
<button ng-click="getPhoto()" class="button button-block button-primary">Take Photo</button> <img ng-src="{{input.Pic1}} " style="max-width: 100%"> <!-- Only Way I get picture to load here is by using $scope.inputs Which loads the picture if another form is added --> <button ng-click="getPhoto()" class="button button-block button-primary">Take Photo</button> <img ng-src="{{input.Pic2}}" style="max-width: 100%"> <label class="item item-input"> <textarea ng-model="input.Infounitcomments" placeholder="Comments"></textarea> </label>
controller
`app1.controller('ChkpCtrl', function($scope, $http, auth, UnitInfo, Camera) {
var index = 0;
//var picture= $scope.unitPhotos.Pic1;
$scope.inputs = [{
value: index,
Infounitloc: '',
Infounittype: '',
Infounitcond: '',
Infounitbrand: '',
Infounitmodel: '',
Infounitage: '',
Infounitbtu: '',
Infounitmfgwarr: '',
Infounitlsuction: '',
Infounithliquid: '',
Infounitsheat: '',
Infounitscool: '',
Infounitcomprated: '',
Infounitcompactual: '',
Infounitcondrated: '',
Infounitcondactual: '',
Infounitcomments: '',
Pic1: '',
Pic2: ''
}];
$scope.addInput = function(index) {
console.log("new input");
$scope.inputs.push({
value: index + 1,
Infounitloc: '',
Infounittype: '',
Infounittype: '',
Infounitbrand: '',
Infounitmodel: '',
Infounitage: '',
Infounitbtu: '',
Infounitmfgwarr: '',
Infounitlsuction: '',
Infounithliquid: '',
Infounitsheat: '',
Infounitscool: '',
Infounitcomprated: '',
Infounitcompactual: '',
Infounitcondrated: '',
Infounitcondactual: '',
Infounitcomments: '',
Pic1: '',
Pic2: ''
});
}
$scope.removeInput = function(index) {
$scope.inputs.splice(index, 1);
}
$scope.unitLocValue = function(InfounitLocW) {
console.log(InfounitLocW);
$scope.inputs.Infounitloc = InfounitLocW;
}
$scope.unitTypeValue = function(InfounitTypeW) {
$scope.inputs.Infounittype = InfounitTypeW;
}
$scope.unitCondValue = function(InfounitCondW) {
$scope.inputs.Infocondtype = InfounitCondW;
}
$scope.unitMfgValue = function(InfounitMfgW) {
if (InfounitMfgW) {
$scope.inputs.Infounitmfgwarr = 'Yes';
} else {
$scope.inputs.Infounitmfgwarr = 'No';
}
}
$scope.storeChkup = function(index) {
console.log('storeChkup ' + JSON.stringify($scope.inputs));
UnitInfo.save($scope.inputs);
}
$scope.getPhoto = function() {
Camera.getPicture().then(function(imageURI) {
//Here I need to save to picture in $scope.inputs for each picture taken
$scope.inputs.Pic1 = imageURI;
console.log('getphoto: ' + JSON.stringify($scope.inputs.Pic1)); //This prints out the file URI
console.log('inputs full: ' + JSON.stringify($scope.inputs)); //This prints out but NO URI in the inputs.Pic1 . Displayes as "Pic1 : '' "
}, function(err) {
console.err(err);
}, {
quality: 75,
targetWidth: 320,
targetHeight: 320,
saveToPhotoAlbum: true
});
}
});`