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检索这些数据，我尝试在每个ng-model上添加textbox，但它不起作用

在我的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

你可以在AngularJS中轻松完成所有这些工作，定义一个$scope.user对象，在其中定义所有用户属性并在ng-model中使用，因为Angular支持双向绑定你可以改变你想要的东西

试试这个

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

Answer 2

利用角度的双向绑定：

 <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只重复该元素，但是＃34;奠定了＆＃34; on，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

在控制器中，根据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>

从ng模型中检索数据

4 个答案: