Angular JS新しい行を既定値として編集可能にする

Question

ng-repeatディレクティブを使用してグリッドを作成していますが、新しい行をクリックすると、デフォルトでは新しい行が編集可能モードにならず、編集ボタン。編集可能なモードで新しい行を作成するにはどうすればよいですか？

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

Answer 1

あなたはxeditableフォームを使用していると思います。フォーム要素にshown = "true"を追加してみてください。

例（これだけでフォームのラインを交換してみてください）：

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

更新：

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