Ben Ben - 1 year ago 137
AngularJS Question

Angular update ng-model in ng-repeat

Basically, I am trying to figure out a way to return a selected value (say, from a modal) to a specific model, when that model may be dynamically generated via ng-repeat.

So this is what my data looks like:

"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

Now, the user can keep generating additional content by clicking a button that adds a new object with their selected type to the 'content' array. So an article may have one content image, or a hundred, or none (but will always have the 'thumbnailImage').

Using, I have added a modal which allows users to either upload a new image file, or select an existing image from the server. So my HTML looks a bit like this (for the ng-repeat content - similar for thumbnailImage):

<div class="Control">
<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-if="block.type == 'image'"
<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>

selectImage() opens the modal, populates it with all the files already uploaded to the server, and has a drag-and-drop section allowing users to upload new images.

The modal looks like this:

<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 }}/{{ }}" ng-click="setActiveImage( file )">
<div ng-show="uploader.isHTML5">
<div nv-file-over uploader="uploader">
Drag and drop images to upload

What I am trying to do is on selecting an image, instantly populate the text input related to the 'selectImage()' button.

At the moment, clicking an image fires 'setActiveImage()', which is:

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

And then the 'Insert image' button next to the 'Select image' button under each image updates the model. However, I'm hoping to be able to do that in the modal so all the user has to do is click the 'Close' modal button and the field is populated.

Does this make sense, and is it possible?

Answer Source

The way I get a specific item of ng-repeat is to pass it to a function in my view.

Then in your controller:

$scope.useSelectedFile = useSelectedFile;

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