【问题标题】:Set ng-model value from ng-repeat input in angular js?从角度js中的ng-repeat输入设置ng-model值?
【发布时间】:2019-04-15 11:23:49
【问题描述】:

我正在尝试允许客户使用 ngRepeat 和 ngModel 编辑项目列表。但我无法设置对输入字段的响应 这是代码。

<form name="customerupdateForm" ng-submit="EditCustomerSubmit(updatecustomer)" class="horizontal-form">                             
    <div class="row-fluid" ng-repeat="updatecustomer in itemList">
        <div class="control-group">
        <label class="control-label">Customer Name</label>
        <input type="text" name="customer_name" ng-model="updatecustomer.customer_name" class="span6 m-wrap"/>                                          
        </div>
        <!--/span-->
        <div class="control-group">
        <label class="control-label">Company Name</label>
        <input type="text" name="company_name" ng-model="updatecustomer.company_name" class="span6 m-wrap"/>                                            
        </div>
    </div>
</form>

Angular.js

$scope.id = $routeParams.id;

$scope.getupdateCustomerdata = function(id){
    $http({
        method: 'get',
        url: 'api/master/customer/getupdatecustomer?id=' + $routeParams.id
    }).then(function successCallback(response) {

        console.log(response.data['customer_name']);
        $scope.updatecustomer = {};
        //set response to input filed
        $scope.updatecustomer.customer_name = response.data['customer_name'];
    }); 
}
$scope.getupdateCustomerdata();

【问题讨论】:

  • 您看到的具体问题是什么?从您发布的代码来看,您似乎正在执行GET 来检索一些客户数据,但ng-repeat 正在查看itemList,我没有看到它定义了您的代码。跨度>
  • 是的,我已检索数据,并且此数据响应设置为输入字段 @BrendanGreen
  • 您希望将响应数据设置为您的输入元素吗?
  • 是的,我想要@FakharAhmadRasul

标签: angularjs angularjs-ng-repeat angularjs-ng-model


【解决方案1】:

我假设您的 api 正在向您返回 Customers 的列表,在这种情况下,您必须在 angularjs 中使 api 响应等于 itemList

.then(function successCallback(response) {

    console.log(response.data['customer_name']);
    $scope.updatecustomer = {};
    //set response to input filed
    $scope.itemList = response;
});

如果您的响应是对象列表并且具有名为 customer_namecompany_name 的属性,那么您的输入元素将填充模型值

【讨论】:

    猜你喜欢
    • 2012-11-22
    • 1970-01-01
    • 2018-10-06
    • 2014-10-05
    • 2015-08-13
    • 1970-01-01
    • 2016-11-07
    • 2016-07-15
    • 1970-01-01
    相关资源
    最近更新 更多