2

I have a ng-repeat loop over processes. What I am trying to do is to add a new block to the current process via a form with select box. However, my problem is I cannot access the model inside the loop from the controller. I guess this is because a new scope is created in a ng-repeat loop.

Still I couldn't find a way to access model from controller. Here is html and javascript code pieces for you to understand problem better.

<div class="container" ng-controller="ProcessCtrl">
    <div class="process" ng-repeat="process in processes">
        <form class="form-inline" ng-submit="addBlock($index)">
            <select ng-model="blockType">
                <option value="1">type1</option>
                <option value="2">type2</option>
                <option value="3">type3</option>
            </select>
            <button type="submit">add</button>
        </form>
    </div>
</div>

angularjs controller

function ProcessCtrl($scope, $filter) {
    //...

    $scope.addBlock = function(index) {
        alert($scope.blockType); // undefined
        $scope.processes[index].blocks.push({type: $scope.blockType});
    };
}
mert
  • 1,942
  • 2
  • 23
  • 43

1 Answers1

4

Yes, the problem is that the parent scope can not access the child scopes created by ng-repeat.

Modify addBlock to also pass up the blockType:

ng-submit="addBlock($index, blockType)"
Mark Rajcok
  • 362,217
  • 114
  • 495
  • 492
  • Is there a specific syntax for passing up the 'blockType'? Or a specific command to access the child scope in the controller? – blnc May 06 '13 at 21:28
  • 1
    @railrailrail, there is no special syntax. Function `addBlock()` will get a `blockType` value/object reference/whatever it is. You can't access the child scope from the controller's `addBlock()` method without using internal `$$...` variables -- I wouldn't recommend that. – Mark Rajcok May 06 '13 at 21:35
  • Works now, thanks. I was trying to access it through $scope still. – blnc May 06 '13 at 21:43