从 ng-model 中检索数据

Question

我想知道从ng-model 检索数据的正确方法是什么。

在我的ng-view，我有这个代码：

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

我想从textboxes 中检索这些数据，我尝试在每个textbox 上放置一个ng-model，但它不起作用

在我的controller，我有这个代码：

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

Id,FirstName等应该放什么？

Answer 1

在您的控制器中，根据 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
    };
} ]);

在您的 HTML 中，将您的文本字段绑定到控制器范围内定义的 log：

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

将日志传递给您的更新/删除方法：

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

Answer 2

利用 Angular 的 2-way 绑定：

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

首先使用ng-repeat 遍历您的日志条目。

虽然原生ng-repeat 仅重复它“放置”的元素，但ng-repeat-start 和ng-repeat-end 将在彼此之间重复所有元素。

在您的文本字段中使用 ng-model，输入将自动填充到日志条目中。

Answer 3

ng-model 自动改变内容。试试这个方法。

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

控制器

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

您可以在AngularJS 中轻松完成所有这些工作，定义一个$scope.user 对象，在该对象中定义所有用户属性并在ng-model 中使用它，因为Angular 支持2 路绑定，您可以更改任何内容你想要的

试试这个

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>

脚本

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