检索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检索这些数据，我试图把一个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 
    }; 
}]); 

又该被推杆，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

你可以做所有这些东西在AngularJS非常简单，定义一个$scope.user对象在其中定义所有的用户属性和使用中的ng-model，由于角度支持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'; 
    }; 
}); 

Answer 3

利用角的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 4

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