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

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>