Question

我正在尝试创建一个简单的angularjs表单，我希望将嵌套对象作为ng-model

$scope.project = {
   name:"Some Name",
   location:{line1:"" , line2:"", city:"", zipcode:""}
}

http://plnkr.co/edit/RfN7qZBX3HlOtGhFOdFX?p=preview

现在的问题是，当我点击第2行，城市，州等焦点回到第1行尝试改变HTML和其他一些东西，但不知道该怎么做.. 尝试删除bootstrap。

Answer 1

问题是您滥用<label>标记。而不是：

<label class="form-group">
     Client Location
     <div class="controls">
         <input type="text" data-ng-model="project.location.line1" class="form-control" placeholder="Line 1">
         <input type="text" data-ng-model="project.location.line2" class="form-control" placeholder="Line 2">
         <input type="text" data-ng-model="project.location.city" class="form-control" placeholder="City">
         <input type="text" data-ng-model="project.location.state" class="form-control" placeholder="State">
         <input type="text" data-ng-model="project.location.zip" class="form-control" placeholder="Zip Code">
         <input type="text" data-ng-model="project.location.country" class="form-control" placeholder="Country">
      </div>
  </label>

试试这个：

<div class="form-group">
   <label>Client Location</label>
    <div class="controls">
        <input type="text" data-ng-model="project.location.line1" class="form-control" placeholder="Line 1">
        <input type="text" data-ng-model="project.location.line2" class="form-control" placeholder="Line 2">
        <input type="text" data-ng-model="project.location.city" class="form-control" placeholder="City">
        <input type="text" data-ng-model="project.location.state" class="form-control" placeholder="State">
        <input type="text" data-ng-model="project.location.zip" class="form-control" placeholder="Zip Code">
        <input type="text" data-ng-model="project.location.country" class="form-control" placeholder="Country">
    </div>
</div>

第一个标签也应该改变。而不是：

<label class="form-group">Name
     <div class="controls">
          <input type="text" data-ng-model="project.name" class="form-control" placeholder="Name">
     </div>
</label>

试试这个：

<div class="form-group">
    <label>Name</label>
    <div class="controls">
        <input type="text" data-ng-model="project.name" class="form-control" placeholder="Name">
    </div>
</div>

或者这个：

<div  class="form-group">
  <label>
    Name
    <input type="text" data-ng-model="project.name" class="form-control" placeholder="Name">
  </label>
</div>

单击时，AngularJS输入字段不会失去焦点

1 个答案: