AngularJS : view variables in scope

Question

I try to make some edit forms on the sane view, I use repeater to render them, data is updating ok, the only problem I have is hiding the edit form after data update

my view:

        <div style="margin-left: 5px; border-top: 1px solid #eee; margin-bottom:5px;" data-ng-repeat="name in person.master_data.alternative_names"> 

        <div id='editor-primary_name' class="editor span6">
          <button id="edit-primary_name" type="button" class="btn btn-mini btn-toggle" data-ng-click="edit_alt_name{{$index}} = true">
          <i class="icon-pencil"></i>
        </button>

        <div data-ng-show="!edit_alt_name{{$index}}">
        <div class="span2 control-label"><p>First Name(s):</p></div>
        <div class="span3 break-word"><strong id="preview_pers_first_name">{{name.first_name}}</strong></div>
        <div class="clearfix"></div>

        <div id="preview_pers_last_name">
          <div class="span2 control-label"><p>Last Name:</p></div>
          <div class="span3 break-word"><strong>{{name.last_name}}</strong></div>
          <div class="clearfix"></div>
        </div>

        <div id="preview_pers_full_name">
          <div class="span2 control-label"><p>Full Name/ Presentation:</p></div>
          <div class="span3 break-word"><strong>{{name.presentation_name}}</strong></div>
          <div class="clearfix"></div>
        </div>

        <div id="preview_pers_full_name">
          <div class="span2 control-label"><p>Name Type:</p></div>
          <div class="span3 break-word"><strong>{{name.type}}</strong></div>
          <div class="clearfix"></div>
        </div>

        <div id="preview_pers_full_name">
          <div class="span2 control-label"><p>SUISA IPI Number:</p></div>
          <div class="span3 break-word"><strong>{{name.suisa_ipi_number}}</strong></div>
          <div class="clearfix"></div>
        </div>
      </div>
    <div class="clearfix"></div>

    <div class="FORM" data-ng-show="edit_alt_name{{$index}}">
        <form class="form-horizontal" data-ng-submit="submit_primary_name({{$index}})" >
          <fieldset id="fieldset1">
              <div class="row control-group">
                  <div class="span2 control-label"><p>First Name(s):</p></div>
                  <div class="span3 break-word"><input type="text" id="first_name" data-ng-model="name.first_name" data-ng-disabled="form_disabled"/></div>
                  <div class="clearfix"></div>
              </div>


              <div id="preview_pers_last_name" class="row control-group">
                <div class="span2 control-label"><p>Last Name:</p></div>
                <div class="span3 break-word"><input type="text" id="last_name" data-ng-model="name.last_name" data-ng-disabled="form_disabled"/></div>
                <div class="clearfix"></div>
              </div>

              <div id="preview_pers_full_name" class="row control-group">
                <div class="span2 control-label"><p>Full Name/ Presentation:</p></div>
                <div class="span3 break-word"><input type="text" id="presentation_name" data-ng-model="name.presentation_name" data-ng-disabled="form_disabled"/></div>
                <div class="clearfix"></div>
              </div>

              <div id="preview_pers_suisa_number" class="row control-group" data-ng-if="person.master_data.roles">
                <div class="span2 control-label"><p>SUISA IPI Number:</p></div>
                <div class="span3 break-word"><input type="text" id="suisa_ipi" data-ng-model="name.suisa_ipi_number" data-ng-disabled="form_disabled"/></div>
                <div class="clearfix"></div>
              </div>

              <div class="row control-group">
                <button type="submit" class="btn btn-success">Submit</button>
                <button type="button" class="btn btn-danger" data-ng-click="edit_alt_name{{$index}} = false" >Cancel</button>
              </div>
          </fieldset>
        </form>
      </div>
    </div>

my controller:

  $scope.submit_primary_name = function(name_id){
          personService.updatePerson($scope.person);
          $scope.form_disabled = true;
          $scope.alt_name_id = name_id;
        }
        /**
          * VIEW ACCESSIBLE METHODS
          */

        init(); // fires the init function after all other controller methods have loaded

        $scope.$watch(function () { return personService.getSelectedPerson() }, function () {
          var person = this.get();
          if (person != null) {
            $scope.person = person;              
            // personService.setSelectedPerson(person);
          }
          $scope.cancel_edit_primary_name();         
          eval("$scope.edit_alt_name" + $scope.alt_name_id + "=false;");

          console.log($scope.edit_alt_name0);
          $scope.form_disabled = false;

the problem is that my dynamically created variables like edit_alt_name_index is not in scope, and I can't access them from my controller because they are undefined in controller. Is there a method to access them from controller?

score 0 · Answer 1 · edited May 23 '17 at 12:22

0

I think it's Angulars dirty checking that fails due to eval is invoked in the global scope (I think). Try this:

// replace this:
eval("$scope.edit_alt_name" + $scope.alt_name_id + "=false;");
// with
$scope['edit_alt_name' + $scope.alt_name_id] = false;

Oh yeah, don't forget eval is evil (Why is using the JavaScript eval function a bad idea?) :)

Here's an example: http://jsfiddle.net/fredrik/dZmgv/

The "form 2" won't hide since it uses eval.

edited May 23 '17 at 12:22

Community

1
1

answered Jul 29 '13 at 08:13

fredrik

17,537
9
51
71

not working, the problem is the edit_alt_name_index seems to be not in scope because is "defined" in view not in controller, I can define edit_alt_name_0, edit_alt_name_1... in my controller because I don't know exactly how many values I have in array – maki Jul 29 '13 at 08:25
You can always use $scope.$parent if the var is declared in the scope above. – fredrik Jul 29 '13 at 08:45

score -1 · Answer 2 · answered Jul 29 '13 at 08:44

Check it properly that you have used function properly you should take care of these things

Registers a listener callback to be executed whenever the watchExpression changes.

The watchExpression is called on every call to $digest() and should return the value which will be watched. (Since $digest() reruns when it detects changes the watchExpression can execute multiple times per $digest() and should be idempotent.

The listener is called only when the value from the current watchExpression and the previous call to watchExpression are not equal (with the exception of the initial run, see below). The inequality is determined according to angular.equals function. To save the value of the object for later comparison, the angular.copy function is used. It also means that watching complex options will have adverse memory and performance implications.

The watch listener may change the model, which may trigger other listeners to fire. This is achieved by rerunning the watchers until no changes are detected. The rerun iteration limit is 10 to prevent an infinite loop deadlock.

If you want to be notified whenever $digest is called, you can register a watchExpression function with no listener. (Since watchExpression can execute multiple times per $digest cycle when a change is detected, be prepared for multiple calls to your listener.)

AngularJS : view variables in scope

2 Answers2