4

I have the following

<table id="socialMediaContainer" class="socialMediaContainer" style="width: 100%;">
    <tbody>
        <tr ng-repeat="row in detailCollection.ChannelsInfo" 
            ng-controller="WhiteLabelSitesCtrl">
            <td><input id="txtSocialName" type="text" class="socialName"
                placeholder="Name" ng-disabled="ViewMode" maxlength="250"
                value="{{row.SocialChannelName}}" /> </td>
            <td><input id="txtSocialURL" type="text" class="txtLabel socialURL"
                placeholder="URL" ng-disabled="ViewMode" maxlength="250"
                value="{{row.SocialChannelURL}}" />
            </td>
            <td class="DragnDropIcon"></td>
            <td>
                <a class="orange " ng-show="ViewMode">Upload</a></td>
        </tr>                    
    </tbody>
</table>

and I have another button outside the ng-repeat that updates the ViewMode variable, but this is not working inside the ng-repeat neither for the ng-show not the ng-disabled. what am i missing here?

Explosion Pills
  • 188,624
  • 52
  • 326
  • 405
Giovanni Rivas
  • 91
  • 10

4 Answers4

3

The problem seems to be, that you need to move ngController directive to the table level (at least): it can't be on the same element with ngRepeat if the later iterated over the array defined in controller.

<table ng-controller="WhiteLabelSitesCtrl" ... >
    <!-- ... -->
</table>

Demo: http://plnkr.co/edit/tu4TLmWIxdcYaiEd7whn?p=preview

dfsq
  • 191,768
  • 25
  • 236
  • 258
1

ng-repeat creates a childscope for each item in the repeater.

Thus viewmode will be a primitive value on that child scope and therefore as a primitive will lose inheritance binding with the parent scope.

If you declare it as an object property in the controller scope however it will then be a reference to that parent object.

$scope.mode ={ViewMode: false}

html example

<a class="orange " ng-show="mode.ViewMode">Upload</a></td>
charlietfl
  • 170,828
  • 13
  • 121
  • 150
0

The button outside of the ng-repeat is not going to be nested in the same controller. The variable that it's modifying probably is not the same one that ViewMode under the WhiteLabelSitesCtrl is looking at.

When you point to this ng-controller, that controller will be activated with a new scope associated with it

<div ng-repeat ng-controller="WhiteLabelSitesCtrl">
   <div ng-show="someValue"></div>
</div>

When you reference this controller again on another tag, it won't reference the existing controller as you might be expecting, it'll actually do the exact same thing... it will create the controller, and create a new scope for it- completely separate from the original one.

<div ng-controller="WhiteLabelSitesCtrl">
     <button ng-click="someValue = !someValue"></button>
</div>
domitall
  • 655
  • 5
  • 15
  • it should be the same as I'm specifying the Controller in the ng-repeat and I'm just working in that page with just that controller – Giovanni Rivas May 11 '15 at 20:51
  • Yes but each object in the repeater has its own controller. They don't all get the same instance of `WhiteLabelSitesCtrl`, they each get their own instance of it. – Ben Black May 11 '15 at 20:56
  • Can you show us the context where the button is declared? – domitall May 11 '15 at 21:02
  • You say you're using the same controller, but I don't see the button in the table. If the button is declared under another ng-controller = "WhiteLabelSitesCtrl" then that controller is going to have a new scope registered during the linking phase, the ng-repeat version will never see that variable change. – domitall May 11 '15 at 21:07
0

Try to pass object instead variable inside ng-repeat scope. Instead ViewMode, declare in your controller:

$scope.model = {};

$scope.model.ViewMode = false;`.

And your binding must be like this: <a class="orange " ng-show="model.ViewMode">. After that all be work fine.

Read this article to understand why it happens: https://github.com/angular/angular.js/wiki/Understanding-Scopes

freethinker
  • 2,257
  • 4
  • 26
  • 49