Angular JS add new row be in editable mode as default

Question

I am creating a grid using the ng-repeat directive, but by clicking on new row , the new row is not in editable mode as a default and user has to click on edit button. how can I make a new row in editable mode ?

    <!-- <tr ng-repeat="primaryskill in primarySkills"> -->
          <tr ng-repeat="skill in skills">
        <td>
          <!-- <span editable-text="primaryskill.name" e-name="name" e-form="rowform"> -->
            <span editable-text="skill.primarySkill.name" e-name="name" e-form="rowform">
            {{ skill.primarySkill.name || 'empty' }}
          </span>
        </td>
        <td >
          <tags-input ng-model="skill.primarySkill.skillGroups" display-property="name" replace-spaces-with-dashes="false" on-tag-added="saveSkillGroup($tag,skill.primarySkill,$index)" on-tag-removed="removeSkillGroup(skill.primarySkill)">
            <auto-complete source="loadskillGroups($query)" display-property="name" load-on-focus="true" min-length="0" load-on-empty="true"></auto-complete>
          </tags-input>
          <!-- <p>Model: {{skill.primarySkill.skillGroups}}</p> -->
        </td>
        <td>
          <tags-input ng-model="skill.secondarySkills"  display-property="name" on-tag-added="saveSecondarySkill($tag,$tag.id, skill.primarySkill)" on-tag-removed="removeSecondarySkill($tag,skill.secondary)">
            <!-- <auto-complete source="loadsecondarySkills($query,skill.primarySkill.id)" display-property="name" min-length="0" load-on-empty="true"></auto-complete> -->
          </tags-input>
          <!-- <p>Model: {{skill.secondarySkills}}</p> -->
        </td>

        <td style="white-space: nowrap;text-align: center;" class="col-xs-12 col-xs-offset-3">
          <!-- form -->
          <form editable-form name="rowform" ng-show="rowform.$visible" class="form-buttons form-inline" onaftersave="savePrimarySkill(skill.primarySkill, $index)">
            <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary" >
              save
            </button>
            <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
              cancel
            </button>
          </form>
          <div >
            <div class="buttons" ng-show="!rowform.$visible">
              <button class="btn btn-primary" ng-click="rowform.$show()">edit</button>
              <button class="btn btn-danger" ng-click="removePrimarySkill(skill.primarySkill)">del</button>
            </div>
          </div>
        </td>
      </tr>
  </table>

  <div id="myprimarySkills">
    <button class="btn btn-default" ng-click="addSkill(primaryskill)">Add Skill</button>
  </div>
</div>

may i can give you another example relevant to this? that will be better for both of us. — Jigar7521
– Jigar7521, Commented Oct 25, 2016 at 10:02
select the code part and press command+K to format code — sabithpocker
– sabithpocker, Commented Oct 25, 2016 at 10:05
yes please , I need the button for adding the new row , and after clicking a new row appears in edit mode as a default — junior dev
– junior dev, Commented Oct 25, 2016 at 10:06
Please add the correct html and JS, there is no ng-repeat in your code sample. Also are you actually using editablegrid library or that's an incorrect tag ? — Pogrindis
– Pogrindis, Commented Oct 25, 2016 at 10:06

kodu.cloud · Accepted Answer · 2016-10-25 10:29:20Z

1

I believe you're using xeditable forms. Just try to add shown="true" on form element.

Example (just try to replace your form line with this):

<form editable-form name="rowform" shown="true" ng-show="rowform.$visible" class="form-buttons form-inline" onaftersave="savePrimarySkill(skill, $index)">

Also you can do it via ng-init:

<form editable-form name="rowform" ng-init="rowform.$show()" ng-show="rowform.$visible" class="form-buttons form-inline" onaftersave="savePrimarySkill(skill, $index)">

Update:

<form editable-form name="rowform" shown="skill.editable === true" ng-show="rowform.$visible" class="form-buttons form-inline" onaftersave="savePrimarySkill(skill, $index)">

$scope.addSkill = function (someParam) {
 $scope.skills.push({
    editable: true
    //some other staff you're implementing
 });
}

edited Oct 25, 2016 at 10:29

answered Oct 25, 2016 at 10:10

kodu.cloud

1,6001 gold badge11 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

junior dev Over a year ago

I need the editable mode only by clicking on the "Add Skill" button which makes a new row

kodu.cloud Over a year ago

Then you need something (for example a property), that will check if form should be shown. For example your skill object has "editable" property and looks like {name: "skill1", editable: false}. Then in form element you need to change shown attribute to something like this shown="skill.editable === true". And your addSkill function should add skills with editable property being set to true. Like this {name: "skill1", editable: true}

kodu.cloud Over a year ago

I've updated an answer for you to make it more clear

Collectives™ on Stack Overflow

Angular JS add new row be in editable mode as default

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related