Geek Answers Handbook

Using the same controller in two places in AngularJS

I’m working on an Ionic application, there are lists with flags on the screen and an option to select all. I am new to AngularJS and Ionic.

"Select all" works fine when using the controller in the parent element, where all the rest and other lists are located.

I want to move Select All to a subtitle so that “Select All” always displays when scrolling.

I tried to use the same controller in both places, but Select All did not work, I just read that the area is changing and the value will not be transferred.

Is there any way to pass the changes or any other way to fix this?

And the data will be populated from the services.

HTML

 <ion-header-bar class="bar-light bar-subheader">
   <div ng-controller="MainCtrl">
      <ion-checkbox ng-model="selectAll" ng-click="checkAll()" >
          <p>Select All</p>
      </ion-checkbox>
    </div>
</ion-header-bar>
<ion-content class="has-header">
  <div class="list" ng-controller="MainCtrl">    
    <ion-checkbox ng-repeat="item in devList" ng-model="item.checked">
      <div class="row">
        <div class="col">
          <p>{{ item.text }} - 99</p>
          <p>{{ item.text }} - 99</p>
        </div>
         <div class="col right">
          <p>{{ item.text }} - 99</p>
           <p>{{ item.text }} - 99</p>
        </div>
      </div>
    </ion-checkbox>
  </div>
</ion-content>

Js

.controller('MainCtrl', function($scope) {
  $scope.devList = [
    { text: "HTML5", checked: true },
    { text: "CSS3", checked: false },
    { text: "JavaScript", checked: false }
  ];

   $scope.checkAll = function() {    
        if ($scope.selectAll) {
            $scope.selectAll = true;
        } else {
            $scope.selectAll = false;
        }
        angular.forEach($scope.devList, function (item) {
            item.checked = $scope.selectAll;
        });
    };
});

CodePen Link

+4
2

$scope. , , .

, . :

:

$scope , .

:

$on (name, listener) - /.

$emit (name, args) - , $rootScope.Scope.

$broadcast (name, args) - ( ), $rootScope.Scope .

.

, , , , , , . - .

, , . , , .

, .

+4

2 'ng-' , , 2- , , .

$stateProvider , :

, : http://codepen.io/anon/pen/vGQJNj

<body  ng-controller="MainCtrl">

<ion-header-bar class="bar-positive">
  <h1 class="title">Checkboxes</h1>
</ion-header-bar>

<ion-header-bar class="bar-light bar-subheader">
      <div>
            <ion-checkbox ng-model="selectAll" ng-click="checkAll()" >

              <p>Select All</p>
  </ion-checkbox>
      </div>

  </ion-header-bar>

<ion-content class="has-header">

  <div class="list">

    <ion-checkbox ng-repeat="item in devList"
                  ng-model="item.checked" 
                  ng-checked="item.checked">
      <div class="row">
        <div class="col">
          <p>{{ item.text }} - 99</p>
          <p>{{ item.text }} - 99</p>
        </div>
         <div class="col right">
          <p>{{ item.text }} - 99</p>
           <p>{{ item.text }} - 99</p>
        </div>
      </div>
    </ion-checkbox>

    <div class="item">
      <pre ng-bind="devList | json"></pre> 
    </div>

    <div class="item item-divider"> 
      Notifications
    </div>

    <ion-checkbox ng-model="pushNotification.checked"
                  ng-change="pushNotificationChange()">
      Push Notifications
    </ion-checkbox>

    <div class="item">
      <pre ng-bind="pushNotification | json"></pre> 
    </div>

    <ion-checkbox ng-model="emailNotification"
                  ng-true-value="'Subscribed'"
                  ng-false-value="'Unubscribed'">
      Newsletter
    </ion-checkbox>
    <div class="item">
      <pre ng-bind="emailNotification | json"></pre> 
    </div>

  </div>

</ion-content>

</body>
+1

More articles:


All Articles