Retrieving the data from a ng-model

Question

I want to know what is the correct way to retrieve data from an ng-model.

In my ng-view, I have this code:

    <table ng-model="logs">
    <tr>
        <td><input type="text" value={{logs[whichItem].Id}} readonly /></td>
    </tr>
    <tr>
        <td><input type="text" value={{logs[whichItem].FirstName}} /></td>
    </tr>
    <tr>
        <td><input type="text" value={{logs[whichItem].LastName}} /></td>
    </tr>
    <tr>
        <td><input type="text" value={{logs[whichItem].Mi}} /></td>
    </tr>

</table>
<div>
    <input type="button" value="Update" ng-click="Update()"/>
    <input type="button" value="Delete" ng-click="Delete()"/>
</div>

I want to retrieve those data from textboxes, I tried by putting a ng-model on each of every textbox but it does not work

In my controller, I have this code:

logController.controller('DetailsController', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
    $scope.logs = logData;
    $scope.whichItem = $routeParams.itemId;

    $scope.Update = function () {
        var user = {
            Id: //what to put here
            FirstName: //what to put here
            LastName: //what to put here
            Mi: //what to put here
        };
        //Update function here
    };
}]);

What should be putted in Id,FirstName and so on?

Answer 1

You can do all those stuffs very easy in AngularJS, define a $scope.user object within which define all the user attributes and use that within the ng-model, Since Angular supports 2-way binding you can change what ever you want

Try this out

Working Demo

html

<div ng-app='myApp' ng-controller="DetailsController">
    <table ng-model="logs">
        <tr>
            <td>
                <input type="text" ng-model="user.Id" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" ng-model="user.FirstName" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" ng-model="user.LastName" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" ng-model="user.Mi" />
            </td>
        </tr>
    </table>
    <div>
        <input type="button" value="Update" ng-click="Update()" />
        <input type="button" value="Delete" ng-click="Delete()" />
    </div>
</div>

script

var app = angular.module('myApp', []);
app.controller('DetailsController', function ($scope) {
    $scope.user = {
        Id: '',
        FirstName: '',
        LastName: '',
        Mi: ''
    };
    $scope.Update = function () {
        // if you want to get all the details its all there in the $scope.user
        console.log(JOSN.stringify($scope.user));

        // if you want to change the value do this as given below
        $scope.user.Id = '12';
        $scope.user.FirstName = 'John';
        $scope.user.LastName = 'Rex';
        $scope.user.Mi = '458';
    };
});

Answer 2

In your controller, define which log you want to update based on itemId:

    logController.controller('DetailsController', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
    $scope.logs = logData;

    // set the current log to edit based on itemId
    $scope.log = logData[$routeParams.itemId];

    $scope.Update = function (log) {
        var user = log;

        //Update function here
    };
} ]);

In your HTML bind your text fields to log which is defined in controller scope:

<table>
    <tr>
        <td><input type="text" ng-model="log.Id" readonly /></td>
    </tr>
    <tr>
        <td><input type="text" ng-model="log.FirstName" /></td>
    </tr>
    <tr>
        <td><input type="text" ng-model = "log.LastName" /></td>
    </tr>
    <tr>
        <td><input type="text" ng-model="log.Mi" /></td>
    </tr>

</table>

Pass the log to your Update/Delete methods:

<div>
    <input type="button" value="Update" ng-click="Update(log)"/>
    <input type="button" value="Delete" ng-click="Delete(log)"/>
</div>

Answer 3

ng-model automatically change the content. try this way.

 <table>
        <tr>
            <td><input type="text" ng-model=whichItem.Id readonly /></td>
        </tr>
        <tr>
            <td><input type="text" ng-model=whichItem.FirstName /></td>
        </tr>
        <tr>
            <td><input type="text" ng-model=whichItem.LastName/></td>
        </tr>
        <tr>
            <td><input type="text" ng-model=whichItem.Mi /></td>
        </tr>

    </table>
    <div>
        <input type="button" value="Update" ng-click="Update(whichItem)"/>
        <input type="button" value="Delete" ng-click="Delete(whichItem)"/>
    </div>

controller

logController.controller('DetailsController', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
    $scope.logs = logData;
    $scope.whichItem = $routeParams.itemId;

    $scope.Update = function (obj) { //it is automatically updates
        //post data directly obj is already modified.

        //Update function here
    };
} ])

Answer 4

Make use of angular's 2-way binding:

 <table>
    <tr data-ng-repeat-start="log in logs">
        <td><input type="text" ng-model="log.Id" readonly /></td>
    </tr>
    <tr>
        <td><input type="text" ng-model="log.FirstName" /></td>
    </tr>
    <tr>
        <td><input type="text" ng-model="log.LastName" /></td>
    </tr>
    <tr data-ng-repeat-end>
        <td><input type="text" ng-model="log.Mi" /></td>
    </tr>

</table>
<!-- no need of this ! 
<div>
    <input type="button" value="Update" ng-click="Update()"/>
    <input type="button" value="Delete" ng-click="Delete()"/>
</div>
-->

First iterate with ng-repeat over your log entries.

While the native ng-repeat only repeat the element it "lays" on, ng-repeat-start and ng-repeat-end will repeat all elements between each other.

With ng-model on your text fields, the input will automatically populated to the log entries.