AngularJS (13) <form name=""> 區分所屬表格
大家應該都看過表格取名，name
<form name="form1">
這有什麼幫助嗎？當然！當你撰寫多個表格時，如果沒有name，你可能要不時翻找這筆輸入來自哪個表格。
好比說，你做了三個表格：
<body ng-app="app1" ng-controller="Controller1">
<form><input ng-model="username"/></form>
<form><input ng-model="address"/></form>
<form><input ng-model="phone"/></form>
...(這中間你可能還有一長串的html)
{{username}}
{{address}}
{{phone}}
<!--糟糕，這幾個東西來自哪個表格？-->
</body>
這可能造成你不容易修改表格，或是得反覆確認表格的值對應到哪個函式，例如：表格一的輸入要給變數甲，但是表格二的要給乙。挺累人吧？
若是表格加入name，AngularJS會把表格的名稱做為「區域名稱」，就能大大改善前述問題。
<body ng-app="app1" ng-controller="Controller1">
<form name="form1"><input ng-model="form1.username"/></form>
<form name="form2"><input ng-model="form2.address"/></form>
<form name="form3"><input ng-model="form3.phone"/></form>
<p> {{form1.username}} </p>
<p> {{form2.address}} </p>
<p> {{form3.phone}} </p>
<!--馬上看出來自哪個表單，耶！-->
</body>
變數名稱
要小心，ng-model="form1.username" 是指變數叫做form1.username不是username。
<!--HTML-->
{{form1.username}}
<!--JS-->
<script>
alert($scope.form1.username);
</script>
};
所以，ng-model 若沒有加上表格名稱，可能會和一般的變數搞混。
<form>
<input ng-model="text"/>
</form>
<form name="form1">
<input ng-model="text"/> <!--和前一個表格共用變數-->
</form>
<form name="form2">
<input ng-model="form2.text"/>
</form>
<p> text: {{text}} <!--form1 修改到它--> </p>
<p> form1.text: {{form1.text}} <!--一直空白--> </p>
<p> form2.text: {{form2.text}} </p>
text: {{text}}
form1.text: {{form1.text}}
form2.text: {{form2.text}}
留言
張貼留言