ng-model 多维数组中的值

Question

我在一个应用程序中工作，我在其中使用 parent 元素附加动态表单属性。示例数据将如下所示

$scope.uploadedFiles = [{
   name: sample.jpg,
   attr: [{
        id: "caption",
        display: "Title",
        value: "",
        placeHolder: "Enter title",
        type: "textbox",
    },
    {
        id: "description",
        display: "Description",
        placeHolder: "Enter description",
        type: "textarea",
        rows: 8,
        value: "",
    }]
},
{
   name: sample2.jpg,
   attr: [{
        id: "caption",
        display: "Title",
        value: "",
        placeHolder: "Enter title",
        type: "textbox",
    },
    {
        id: "description",
        display: "Description",
        placeHolder: "Enter description",
        type: "textarea",
        rows: 8,
        value: "ttttt",
    }]
}]

在模板中我使用这样的代码

 <div  class="col-md-4" ng-repeat="item in uploadedFiles">
     <div style="padding:10px 4px;">
          <img class="{{photocss}}" style="width:100%; height:auto;" src="{{item.name}}" />
          <div ng-repeat="config in item.attr">
              <input ng-if="config.type=='textbox'" type="text" ng-blur="validate(config)" class="form-control" ng-model="config.value" placeholder="{{config.placeHolder}}"></input>
             <textarea ng-if="config.type=='textarea'" rows="config.rows" class="form-control"  ng-model="config.value" placeholder="{{config.placeHolder}}"></textarea>
        </div>
   </div>

当我运行申请并上传一些文件时。上传的照片列表与数组中定义的动态属性一起显示，例如标题和说明。

当我在标题中输入内容时，所有标题都已更新，它显示 ng-model 与所有标题属性绑定，即使我在单独的数组中为每个项目（照片）定义了属性。

附加屏幕中显示的问题：

在屏幕上你会看到，当我输入测试标题时，它也填充了其他元素标题。有人可以帮助我哪里出错了。

还为我面临的问题创建了 plnkr http://plnkr.co/edit/wruINbUYdarcxFYffJ0o?p=preview。

我想为每个元素添加标题而不与另一个元素标题冲突。

Answer 1

我在这里做了一个 plnkr 与你的模型结构一起工作：http://plnkr.co/edit/svR5Vz?p=preview但似乎没有这种效果。所以可能错误在你代码的其他部分。

在这种情况下，使用 ng-switch 可能是更好的选择，然后 ng-if:

<div ng-repeat="config in item.attr" ng-switch="config.type">

ng-model 多维数组中的值

ng-model value in multidimentional array

angularjs

angularjs-ng-repeat