cari

Rumah  >  Soal Jawab  >  teks badan

angular.js - AngularJS中form的input控件绑定问题

我从官方文档中了解到当给form指定name,则会将form添加到scope中,利用form的name来取得form对象;同时也能根据控件的name,从form对象中取得控件对象。
如:

<form role="form" name="infoForm">
    <input name="name" class="xxx" ng-model="xxx">
</form>

在controller中

var form = $scope.infoForm;
//如果控件内容发生改变
if(form.name.$dirty) {
    ...
}

现在遇到的问题是:
有一系列控件是通过ng-repeat生成的,我尝试过"name = xx{{$index}}"来指定不同的控件,

<form name="adminForm">
    管理员名单
    <p ng-repeat="manager in theEditingRobot.managers">
      <p class="cx-inputer">
        <input name="manager{{$index}}" type="email" placeholder="请输入邮箱"
               ng-model="manager.val" ng-blur="checkManager($index)">
      </p>
    </p>
</p>

结果发现,虽然在html页面中可以看到ng-repeat生成的控件name分别为xxx0,xxx1等,但是查看form对象属性的时候发现,没有xxx0,xxx1等属性,而只有xxx{{$index}}属性,且该属性表示ng-repeat生成的最后一个input控件。如图,

html页面:


如图所示,ng-repeat生成了2个input控件

但是在controller中调试时发现,form中没有manager0和manager1属性,而只有manager{{$index}},该属性表示manager1

推断是ng-repeat展开发生在form添加到scope行为后。那么,如何才能通过form获取到所有的控件对象?为什么$scope.adminForm显示的是Constructor而不是Object?

PS:我使用的是yeoman自动生成的框架
PPS: 还发现form显示instantiate.c的情况,仍然出现上述问题
JSFiddle链接:https://jsfiddle.net/xwadh6kt/1/

曾经蜡笔没有小新曾经蜡笔没有小新2744 hari yang lalu549

membalas semua(2)saya akan balas

  • 阿神

    阿神2017-05-15 16:55:30

    <input name="xxx{{$index}}">

    Perhatikan bahawa nama unsur bentuk hanya boleh menjadi rentetan dan jenis data seperti tatasusunan atau objek tidak boleh dibina Walau bagaimanapun, pembolehubah dalam rentetan boleh dihuraikan menggunakan kurungan kerinting berganda.

    Saya sedang mengerjakan sesuatu yang serupa semasa saya menjawab Kumpulan borang yang dijana secara dinamik telah dilalui menggunakan ngRepeat Izinkan saya menunjukkan kepada anda kesan sebenar:

    Ini ialah kod sumber yang sepadan:

    Saya menggunakan kaedah ini untuk mendapatkan nilai unik untuk kedua-dua id dan nama.

    balas
    0
  • 世界只因有你

    世界只因有你2017-05-15 16:55:30

    Alasannya ialah masalah versi angularjs saya menggunakan versi 1.4 dan masalah di atas tidak berlaku Untuk butiran, lihat: http://stackoverflow.com/questions/24020503/angular-ng-repeat-with-ng-...

    balas
    0
  • Batalbalas