点击AngulaJS输入字段时不会失去焦点

AngulaJS input fields not loose focus when clicked

本文关键字：失去 焦点 AngulaJS 输入 字段 点击      更新时间：2023-09-26

我正在尝试创建一个简单的angularjs表单，我想在其中嵌套对象作为ng模型

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

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

现在的问题是，当我点击第2行时，城市、州等的焦点会回到第1行尝试更改HTML和其他一些内容，但不知道该怎么办。。也尝试删除引导程序。

问题是您滥用了<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>
相关文章：