ng-repeat 中的 Angular 更新 ng-model答案

【问题标题】：Angular update ng-model in ng-repeatng-repeat 中的 Angular 更新 ng-model
【发布时间】：2016-07-21 01:47:16
【问题描述】：

基本上，当该模型可能通过 ng-repeat 动态生成时，我试图找出一种将选定值（例如，从模态）返回到特定模型的方法。

这就是我的数据的样子：

{
    "title": "Example Title",
    "enabled": true,
    "thumbnailImage": "file1.png",
    "content": [{
        "order": 0,
        "type": "wysiwyg",
        "content": "<div>This is wysiwyg content!</div>"
    },
    {
        "order": 1,
        "type": "image",
        "content": "file2.png"
    }],
    "id": 1
}

现在，用户可以通过单击将具有所选类型的新对象添加到“内容”数组中的按钮来继续生成其他内容。所以一篇文章可能有一个内容图像，或者一百个，或者没有（但总是有'thumbnailImage'）。

使用https://github.com/nervgh/angular-file-upload，我添加了一个模式，允许用户上传新的图像文件，或者从服务器中选择现有的图像。所以我的 HTML 看起来有点像这样（对于 ng-repeat 内容 - 与 thumbnailImage 类似）：

<div class="Control">
  <label>Content</label>
  <div class="panel panel-default" ng-repeat="block in article.content">
    <div class="panel-body">
      <!-- ... other content types here ... -->
      <div ng-if="block.type == 'image'">
        <input type="text"
               ng-model="block.content"
               ng-if="block.type == 'image'"
               class="form-control"
        >
        <a ng-click="selectImage()" class="btn btn-primary">Select image</a>
        <button type="button" ng-if="!!activeImage" ng-click="block.content = activeImage" class="btn btn-secondary">Insert image</button>
      </div>
    </div>
  </div>
</div>

selectImage() 打开模式，使用已上传到服务器的所有文件填充它，并有一个拖放部分允许用户上传新图像。

模态看起来像这样：

<div ng-if="showFileManager" nv-file-drop uploader="uploader">
    <div class="row">
        <div ng-repeat="file in files" class="col-3">
            <img ng-src="/{{ file.container }}/{{ file.name }}" ng-click="setActiveImage( file )">
        </div>
    </div>
    <div ng-show="uploader.isHTML5">
        <div nv-file-over uploader="uploader">
            Drag and drop images to upload
        </div>
    </div>
</div>

我要做的是在选择图像时，立即填充与“selectImage()”按钮相关的文本输入。

此时，单击图像会触发“setActiveImage()”，即：

  $scope.setActiveImage = function( file ) {
      var filePath = 'http://localhost:3000/uploads/' + file.container + '/' + file.name;
      $scope.activeImage = filePath;
  };

然后每个图像下方“选择图像”按钮旁边的“插入图像”按钮更新模型。但是，我希望能够在模态中做到这一点，因此用户所要做的就是单击“关闭”模态按钮并填充该字段。

这有意义吗？有可能吗？

【问题讨论】：

模态是否已经可以显示图像了？它有自己的控制器吗？
是的。我想我只是让自己感到困惑，让它变得比必要的更难 - 下面 Jinw 的解决方案非常有效。

标签： angularjs

【解决方案1】：

我获得 ng-repeat 特定项目的方式是将其传递给我认为的函数。

 <html element ... useSelectedFile(file)></html element>

然后在你的控制器中：

$scope.useSelectedFile = useSelectedFile;

function useSelectedFile(file){
    //do stuff
    //call function
    //set scope item in view to file
}

【讨论】：

呵呵，我想多了。是的，这非常有效。谢谢你，Jinw
不客气！我的代码也过于复杂了，这很容易做到。