從ng模型中檢索數據

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

您可以在AngularJS非常輕松地完成所有這些工作，定義一個$scope.user對象，在其中定義所有用戶屬性，並在ng-model使用它，由於Angular支持2向綁定，因此您可以更改所需的內容

試試看

工作演示

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

利用angular的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僅重復其“放置”的元素，但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>

將日志傳遞給您的Update / Delete方法：

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