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