Question

基本上，我试图找出一种方法将选定的值（例如，从模态）返回到特定模型，此时该模型可以通过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;
  };

然后每个图像下“选择图像”按钮旁边的“插入图像”按钮更新模型。但是，我希望能够在模态中执行此操作，因此用户只需单击“关闭”模式按钮即可填充该字段。

这是否有意义，是否可能？

Answer 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
}

ng-repeat中的角度更新ng-模型

1 个答案: