Question

我正在使用动态表单属性和父元素附加的应用程序中工作。示例数据将如下所示

$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绑定所有标题属性，即使我在单独的数组中为每个项目（照片）定义了属性。

附带屏幕中显示的问题： enter image description here

在屏幕中你会看到，当我输入测试标题时，它也填充了其他元素标题。有人可以帮助我犯错的地方。

还为我面临的问题创建了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值

1 个答案: