I am trying to implement an application like Crm. I implemented a small function in which I can select div from different options. I gave a button to click the image in the div, as well as ng-style to set the properties.
The problem is that I used the ng model to push the image into a div. Now because of this, when I try to insert images into a new div, I get the same image again and again. Can anyone give a solution to this
The problem is how I can control the image and the parameters set by the user and at the same time display the same in the user interface.
Below is my code .. cms.html: -
<div id="picture_container" style="display:none"> <div>Display Picture 1: <input type="file" ngf-select="" ng-model="picFile" name="file" ngf-accept="'image/*'" required=""> <i ng-show="myForm.file.$error.required">*required</i> </div> <div>Display Picture 2: <input type="file" ngf-select="" ng-model="picFile1" name="file" ngf-accept="'image/*'" required=""> <i ng-show="myForm.file.$error.required">*required</i> </div> <div>Display Picture 3: <input type="file" ngf-select="" ng-model="picFile2" name="file" ngf-accept="'image/*'" required=""> <i ng-show="myForm.file.$error.required">*required</i> </div> </div> <div class="home-page container" id="admin-cont" style="margin-bottom: 50px;padding-top: 20px;"> <div ng-repeat="layout in selectedLayouts track by $index" class="" style="margin-bottom: 35px;position:relative;"> <div ng-if="picFile" class="internal" ng-style="{'color': myColor || '#000','left':myLeft || '50%','top':myTop || '50%', 'font-size':myFont || '14px'}" style="position:absolute;" contenteditable="true">{{myText}}</div> <div ng-if="picFile" class="internal" ng-style="{'color': myColor || '#000','left':myLeft || '50%','top':myTop || '50%', 'font-size':myFont || '14px'}" style="position:absolute;padding-top:14px;" contenteditable="true">{{myText1}}</div> <ng-include src="layout" class></ng-include> </div> </div> <script type="text/ng-template" id="grid-12"> <div class="row" id="grid-121"> <div class="col-sm-12" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;"> <ng-repeat="imageSource in imageSources track by $index" /> <span class="glyphicon glyphicon-plus pull-right deleteBtn" ng-click="deleteRow($index, layout)"></span> </div> </div> </script> <script type="text/ng-template" id="grid-8-4"> <div class="row"> <div class="col-sm-8" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;"> <img ngf-src="picFile" class="img img-responsive"> </div> <div class="col-sm-4" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;"> <img ngf-src="picFile1" class="img img-responsive"> <span class="glyphicon glyphicon-plus pull-right deleteBtn" ng-click="deleteRow($index, layout)"></span> </div> </div> </script> <script type="text/ng-template" id="grid-6-6"> <div class="row"> <div class="col-sm-6" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;"> <img ngf-src="picFile" class="img img-responsive"> </div> <div class="col-sm-6" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;"> <img ngf-src="picFile1" class="img img-responsive"> <span class="glyphicon glyphicon-plus pull-right deleteBtn" ng-click="deleteRow($index, layout)"></span> </div> </div> </script> <script type="text/ng-template" id="grid-4-8"> <div class="row"> <div class="col-sm-4" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;"> <img ngf-src="picFile" class="img img-responsive"> </div> <div class="col-sm-8" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;"> <img ngf-src="picFile1" class="img img-responsive"> <span class="glyphicon glyphicon-plus pull-right deleteBtn" ng-click="deleteRow($index, layout)"></span> </div> </div> </script> <script type="text/ng-template" id="grid-4-4-4"> <div class="row"> <div class="col-sm-4" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;"> <img ngf-src="picFile" class="img img-responsive"> </div> <div class="col-sm-4" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;"> <img ngf-src="picFile1" class="img img-responsive"> </div> <div class="col-sm-4" ng-click='selectedDiv($event)' style="border: 1px solid;min-height: 300px;"> <img ngf-src="picFile2" class="img img-responsive"> <span class="glyphicon glyphicon-plus pull-right deleteBtn" ng-click="deleteRow($index, layout)"></span> </div> </div> </script>
below is my javascript code: -
$scope.items = ['grid-12', 'grid-6-6', 'grid-4-8', 'grid-8-4', 'grid-4-4-4']; $scope.selectedLayouts = []; $scope.open = function() { var modalInstance = $uibModal.open({ animation: true, templateUrl: 'layoutTemplateModal.html', controller: $scope.LayoutModalCtrl, size: 'lg', resolve: { items: function() { return $scope.items; } } }); modalInstance.result.then(function(selectedItem) { $scope.selectedLayouts.push(selectedItem); }, function() { $log.info('Modal dismissed at: ' + new Date()); }); };
Please help me. Thanks