Question

我在我的应用程序中使用ASP.Net MVC和AngularJS的混合，对两者都是相当新的。由于各种原因，我决定使用MVC创建表单，然后使用AngularJS加载数据并绑定到表单元素。

有两个项目的挑战，我找到了解决方案，但不确定它是否是最佳的。我很想知道是否有更好的方法来做到这一点。

在我的AngularJS控制器中，我有一个Scope，其中一个部分看起来像这样：

{
   (...)
   Barriers: ['a', 'b', 'c', 'd', 'e'],
   (...)
   BarrierComments: [
      { BarrierGroup: 'x', Comment: 'Some text here' },
      { BarrierGroup: 'y', Comment: 'Some other text here' },
      { BarrierGroup: 'x', Comment: 'Some third text here' }
   ]
   (...)
}

现在，在生成的表单中，我有两个我想绑定的项目： 1）CheckBoxes应绑定并添加/删除Barriers数组中的项目 2）TextAreas应该分别编辑BarrierComments中的Comment

（我知道使用ng-repeat可能会更容易，或者可能稍微更改模型。但是，我的世界有点复杂，我仍然希望找到最佳解决方案）

在MVC部分，我生成如下复选框：

<input type="checkbox" ng-checked="Barriers.indexOf('a') > -1" ng-click="toggleBarrier('a')" />

（toggleBarrier函数将在Barrier数组中添加或删除项目）

TextAreas的生成方式如下：

<textarea ng-model="(BarrierComments | filter:{BarrierGroup:'x'})[0].Comment"></textarea>

请注意，...... e和x ... z实际上是Guids，只是为了便于阅读而缩短。这些也在数据库中配置，因此它们不是固定值。

我的问题是：是否有更优雅的方法使控件绑定到这些数据？我特别不满意TextArea，如果我的模型缺少BarrierComments数组中的项目，它将失败...

数组中的angularjs复选框项

0 个答案: