When you do not write anything, do not appear "Type a name"

Question

I’m working on an Ionic app. There, when I search for a photo in Google and select it, the name field is filled with the word that did the search. Now, when I select an image of the phone, the field to put the name is already blank to put any name, but you can leave blank if you want. The problem is when you leave it blank and have it shared, the generated image is named "Enter a name".

The code:

         <div class="col-50 block text-right panel" style="margin-right: 2px;position:relative;" ng-click="showOptions(image1)">
            <div ng-show="!shouldShowImage(image1.src)" style="text-align: center;margin:15px;">
              Selecione a sua foto ou a foto de um amigo!
              <div>
                <a class="button button-icon ion-camera larger" ng-click="takePicture(image1)"></a>
                <a class="button button-icon ion-images larger" ng-click="chooseFromGalery(image1)"></a>
                <a class="button button-icon ion-search larger" ng-click="searchImage(image1)"></a>
              </div>
            </div>
            <!--<ion-content direction="xy" locking="false" scroll="true" ng-show="shouldShowImage(image1.src)" ng-click="showHideCleanButton(image1)">
                <img id="image1" ng-src="{{image1.src}}">
            </ion-content>-->
            <ion-scroll zooming="true" direction="xy" scrollbar-x="false" scrollbar-y="false" min-zoom="1" max-zoom="3" ng-show="shouldShowImage(image1.src)" ng-click="showHideCleanButton(image1)">
              <img id="image1" ng-src="{{image1.src}}" style="height:100vmin;">
            </ion-scroll>
              <div class="imagelabel" ng-show="shouldShowImage(image1.src)">
                  <!--{{image1.textname == null ? "digite um nome..." : image1.textname}}-->
                  <input type="text" placeholder="Digite um nome..." ng-model="image1.textname" style="text-align: center;">
              </div>
            <div style="position: absolute;top: 0px;left: 0px;" ng-show="showClearButton(image1)">
              <button ng-click="clean(image1)" class="button button-energized"><i class="icon ion-close-circled"></i></button>
            </div>
              <!--<div id='parent' style="position:fixed;bottom:0px;">
                  <div id='child' style="width:100px; margin:0px auto;">
                      centered div
                  </div>
              </div>-->
          </div>

Does anyone know how to solve this problem?

Answer 1

<input type="text" id="txName" placeholder="Digite o nome" ng-model="image1.textname" style="text-align: center;">

When firing the function to save the photo, at the beginning of it you do

$('#txName').prop('placeholder','');

or

$('#txName').attr('placeholder','');

For it to remove only at the correct time and not influence the final result that is the image.

Answer 2

Friend, Ionic (better, Angularjs!) values not changing the DOM via controller. My suggestion is that you control placeholders or filenames via scope variables. Below follows an example of a select that, when changed, changes the placeholder text of a textarea:

Template.html:

<select ng-model="tipoUsuario" ng-change="userChanged()" >
   <!-- options... -->
</select>
<textarea placeholder="{{dicaDeTexto}}"></textarea>

Controller.js:

$scope.userChanged = function( ) {
    $scope.dicaDeTexto = $scope.tipoUsuario.dica;
};