Question

我有一个表单，其中包含Customer及其属性填充输入字段。如果用户需要更改客户，则单击CustomerName输入。将打开一个模式，其中包含一个客户列表供他们选择。选择会填充该模态中的输入字段。我需要在已经填充的输入字段中放置新信息。 plunkr

<div class="form-group">
  <div class="input-group">
   <span class="input-group-addon">C. Name</span>
   <input style="width:400px" ng-model="currentItem.CustomerName" class="form-control btn btn-default" ng-click="editJobCustomerModal()" />
   </div>
</div>
   <div class="form-group">
     <div class="input-group">
       <span class="input-group-addon">C. Address</span>
       <input style="width:390px" ng-model="currentItem.CustomerAddress" class="form-control" type="text">
     </div>
   </div>

模态

<div ng-controller="JobCtrl" data-backdrop="static" data-keyboard="false" class="modal fade" id="editJobCustomerModal" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
    <div class=" modal-dialog  modal-editJobCustomer">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title custom_align" id="Heading">Change Job Customer</h4>
            </div>
            <div class="modal-body">
                <div class="container">
                    <form ng-submit="submitJob()" enctype="multipart/form-data">
                        <fieldset>
                            <div class="col-md-8">
                                <!-- Prepended text-->
                                <div class="form-group">
                                    <div class="input-group">
                                        <span class="input-group-addon">C. Name</span>
                                        <input style="width:400px" ng-model="selectedCustomer.CustomerName" class="form-control" type="text" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="input-group">
                                        <span class="input-group-addon">C. Address</span>
                                        <input style="width:390px" ng-model="selectedCustomer.CustomerAddress" class="form-control" type="text">
                                    </div>
                                </div>
                          </fieldset><br />
                        <input style="float:right" class="btn btn-danger" ng-click="" type="button" value="Update"/>
                        <input style="float:right; margin-right:20px" type="button" class="btn btn-primary" data-dismiss="modal" value="Cancel"  />
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

解决了它。正确的代码在下面的plunker中 Plunkr

<body ng-app="TestApp">
 <div ng-controller="JobCtrl">
<div ng-repeat='currentItem in customers'>
  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon">C. Name</span>
      <input ng-model="currentItem.CustomerName" class="form-control btn btn-default"     ng-click="editJobCustomerModal($index)" />
    </div>
  </div>
  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon">C. Address</span>
      <input type="text" ng-model="currentItem.CustomerAddress" class="form-control" />
    </div>
  </div>
</div>
<div data-backdrop="static" data-keyboard="false" class="modal fade" id="editJobCustomerModal" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
  <div class=" modal-dialog  modal-editJobCustomer">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title custom_align" id="Heading">Change Job Customer</h4>
      </div>
      <div class="modal-body">
        <div class="container">
          <form ng-submit="" enctype="multipart/form-data">
            <fieldset>
              <div class="col-md-8">
                <!-- Prepended text-->
                <div class="form-group">
                  <div class="input-group">
                    <span class="input-group-addon">C. Name</span>
                    <input type="text" ng-model="selectedCustomer.CustomerName" class="form-control" />
                  </div>
                </div>
                <div class="form-group">
                  <div class="input-group">
                    <span class="input-group-addon">C. Address</span>
                    <input type="text" ng-model="selectedCustomer.CustomerAddress" class="form-control" />
                  </div>
                </div>
              </div>
            </fieldset>
            <br />
            <input type="button" style="float:right" class="btn btn-danger" ng-click="" data-dismiss=modal value="Update" ng-go-click="#" />
            <input type="button" style="float:right; margin-right:20px" class="btn btn-primary" data-dismiss="modal" value="Cancel" ng-go-click="#" />
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

  app.controller('JobCtrl', function ($scope, $rootScope) {
  //Modal for Edit JobCustomer
   $scope.customers = [
    {'CustomerName':'Name1','CustomerAddress':'addy1'},
    {'CustomerName':'Name2','CustomerAddress':'addy2'}
  ];

 $scope.editJobCustomerModal = function (item) {
   $scope.selectedCustomer = $scope.customers[item];
    $('#editJobCustomerModal').modal();

 };
 });

如何将输入字段绑定到模态输入字段AngularJS

1 个答案: