1

我通过创建一个表单来搞乱 angularjs（顺便说一句，这很棒）。我从 json 加载数据，我可以成功读取数据，但我对我所做的 plunker 有几个问题。（http://plnkr.co/edit/LHX40xHKmoB9onboeNrV?p=preview）

我那里有两张表格，都是一半的工作。在我继续之前，有一个对 angularjs pro 的请求：总的来说，我的 plunker 代码样式是正确的 angularjs 方式吗？我该如何改进它？谢谢。

无论如何，以下代码段是两种形式之间的区别：

FORM#1： 为了使表单正常工作，我指定了 'jsoncountry中获取它的值countries

JS：

$scope.vm.country = data[0].countries[0];

HTML：

Country: <select ng-model="vm.country" ng-options="c.name for c in vm.countries"></select>

FORM#2： JSON 与 #2 略有不同。该countries数组称为country。选择选项 expr 引用自身 - 失败。此处提交的 jsonon-click具有正确的国家代码/名称值，这是我所追求的，但它也包含cities数组，这不是我想要的。

JS：

$scope.vm.country = data[0].country[0];

HTML：

Country: <select ng-model="vm.country" ng-options="c.name for c in vm.country"></select>

我想确切地知道为什么选择框的行为方式与它们在 form2 中的行为方式相同。至于提交表单，显然不希望发送无用的数据。那么你将如何只发送你需要的东西$scope.vm呢？对于小型表单，手动将每个输入添加到新的 $scope 项目可以正常工作，但对于具有许多输入的大型表单，它并不理想。

更新

这是一个有效的解决方案，将适当的值放入单独的变量 ( $scope.form) 中。此外，$watch已更改为ng-change. 这可能对其他人有所帮助。

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

4

1 回答 1

3

这是一个微妙的错误。如果您查看您的 json 文件，您会注意到您的国家“列表”被命名为 country。将其更改为国家。它失败的原因是因为在控制器中设置 vm.country 时覆盖了整个列表。我已经分叉/更新了你的plunker以显示一个简单的修复。

就表单数据而言，您可能希望将您的选择包装在表单元素中并以这种方式获取值。查看Angularjs 的页面。

总的来说，我的 plunker 代码风格是正确的 angularjs 方式吗？我该如何改进它？谢谢。

它一点也不差，因为它只有几个控制器。我在使用 Angular 时发现的一些可以帮助您的事情：

1) 对于这样的情况，调试 html 可能很烦人。幸运的是，angular 的“angular.element”方法返回了 html 以及检查元素范围的能力。观看这个调试教程，了解它是如何工作的。无论您使用的是 firebug 还是 chrome 开发工具，都应该应用相同的概念。

2) 想办法尽可能避免使用 $watch 方法。原因是每次在您的应用程序中发生任何更新时都会调用此方法，即使更新与调用它的范围没有直接关系。作为一个建议，您可能希望在 select 语句中添加一个 ng-change 指令，该指令应该只在实际 dom 元素更改时触发，而不是让 $watch 在框架中的每个 $digest 触发。

希望这可以帮助。

于 2013-04-24T04:47:43.247 回答