CODEWITHSUNDEEP
javascriptjqueryangularjs
John Charger
John Charger

Reputation: 426

Positioning and editing the newly created row?

I'm making a table.

I've made my rows editable with: ng-click="todo.editing = !todo.editing"

index.html

<tr ng-repeat="todo in todos>
    <td>
        <div ng-hide="todo.editing">{{ todo.id }} </div>
        <div ng-show="todo.editing"><input type="id" ng-model="todo.id" /></div>
    </td>
    <td>                
       <div ng-hide="todo.editing">{{ todo.text }}</div>
       <div ng-show="todo.editing"><input type="text" ng-model="todo.text" /></div>
   </td>
</tr>

<button class="btn btn-warning btn-sm ng-scope" ng-click="todo.editing = !todo.editing"><span class="glyphicon glyphicon-pencil"></span></button>

I've made a button to add new rows to the table:

index.html

<button type="button" class="btn btn-default btn-block " ng-click="addRow($storage.todos)">New record</button>

script.js

$scope.addRow = function (arr) {
    console.log(arr);
    arr.push({'id':$scope.id, 'text': $scope.text});
};

Now I want to expand my addRow() function so I can add a new row and at the same time position myself at that row, and also put me in edit mode.

The problem with position is that I am using pagination. Let's say I am at page one in pagination and the newly row comes at page four. I want to automatically get there.

Can somebody give me a hint? Thanks for your time.

Upvotes: 1

Views: 78

Answers (2)

messerbill
messerbill

Reputation: 5629

I created a fiddle:

https://jsfiddle.net/0t1trq6m/

addRow() method now looks like:

$scope.addRow = function () {
 console.log("test");
 var e = new Entry();
 e.id = $scope.todos.length;
 e.text = $scope.content;
 $scope.todos.push(e);
}

Upvotes: 1

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

Just make editing property value true during pushing.

Like this

arr.push({'id':$scope.id, 'text': $scope.text,editing:true});

Upvotes: 1

Related Questions