AngularJS：空の配列のバグを解決する必要があります

Question

私はラジオボックスをチェックすることで開いているサブスクリプション機能を持っています。このセクションの中に開いているときは、毎週または毎月、そしてアイテムの下に2つのラジオボタンがあります。私はこの期間の状態を保存するときに私はサーバーから持っている1つの項目のために保存する必要があります。スクリーンショットを確認すると、viewが表示されます。とにかく、配列結果が空で、その項目がその配列にないため、保存はありません。私の問題は、私は下の項目を参照していますが、何とか私はラジオボタンから選択された期間で配列にプッシュしていないんです。なぜそれが正しいのかを理解する助けを受けたいと思います。

私はコントローラとビューを共有しているコードを確認してください：

searchApp.controller('UserSettingsCtrl', ['$scope', '$q', '$rootScope', 'aiStorage', 'userConfig', 'UserSettingsService', 'WebsiteSource', 'AnalyticsEmailService', 'toaster', '$translate', '$filter', 'ngTableParams', 
function($scope, $q, $rootScope, store, userConfig, UserSettingsService, WebsiteSource, AnalyticsEmailService, toaster, $translate, $filter, ngTableParams) { 
    $scope.init = function() { 
     $scope.availableLanguages = { 
      da: 'Dansk', 
      en: 'English', 
      sv: 'Svensk' 
     } 
     window.scope = $scope 
     $scope.userInfo = store.get('user') 
     $scope.loadingAction = false 
     $scope.selectFlag = false 
     $scope.subscriptionEnginesFromServer = [] 
     $scope.subscriptionEngines = [] 
     $scope.analyticsEmailSettings = {} 
     $scope.engines = angular.copy(WebsiteSource.sites) 
     AnalyticsEmailService.getUserSubscription().then(
      function success(response) { 
       $scope.loadingAction = false 
       $scope.subscription = response 
       console.log('response.data', response.data) 
       $scope.subscriptionEnginesFromServer = populateSubscribedEnginesFromServer(response.data) 
       getUnselectedEngines() 
       $scope.analyticsEmailSettings.subscribed = (response.data.length > 0) 
      }, 
      function error() {}) 
    } 

    function populateSubscribedEnginesFromServer(data) { 
     console.log('data', data) 
     var subscriptionEngines = [] 
     for (var i = 0; i < data.length; i++) { 
      var subscription = data[i] 
      var engine = $scope.engines.filter(function(x) { 
       if (x.id === subscription.engine) { 
        var index = $scope.engines.indexOf(x) 
        $scope.engines[index].type = subscription.type 
       } 

       return x.id === subscription.engine 
      })[0] 
      console.log('engine', engine) 
      if (engine) subscription.name = engine.name 

      subscriptionEngines.push(subscription) 
     } 
     console.log('subscriptionEngines', subscriptionEngines) 
     if (subscriptionEngines.length == 0) { 
      $scope.analyticsEmailSettings.subscription = 'WeeklyAnalytics' 
     } else { 
      $scope.analyticsEmailSettings.subscription = subscriptionEngines[0].type 
     } 
     return subscriptionEngines 
    } 

    // Save for all always the user have to press the save button if wants save no auto save as it is now 
    $scope.save = function() { 
      $scope.loadingAction = true 
      if ($scope.analyticsEmailSettings.subscribed) { 
       AnalyticsEmailService.updatesubscriptions($scope.subscriptionEnginesFromServer, function success(response) {}, function error() {}) 
      } else { 
       $scope.analyticsEmailSettings.subscription = 'WeeklyAnalytics' 
       $scope.subscriptionEnginesFromServer = [] 
       AnalyticsEmailService.updatesubscriptions($scope.subscriptionEnginesFromServer, function success(response) {}, function error() {}) 
      } 
      UserSettingsService.save({ 
       userId: $scope.userInfo.id 
      }, $scope.userInfo, function() { 
       $scope.loadingAction = false 
       userConfig.setCurrentUserConfig($scope.userInfo) 
       userConfig.setUserLocale() 
       store.set('user', $scope.userInfo) 
       toaster.pop({ 
        type: 'success', 
        body: $translate.instant('notifications_user_settings_changed_success') 
       }) 
      }, function() {}) 
      $scope.subscriptionEngines = [] 
     } 
     // removeSelectedEngines 
    getUnselectedEngines = function() { 
     for (var i = 0; i < $scope.engines.length; i++) { 
      if ($scope.subscriptionEnginesFromServer.filter(function(x) { 
        return x.engine === $scope.engines[i].id 
       }).length == 0) 
       $scope.engines[i].type = '' 
     } 
    } 

    // @todo: consider referring by array key instead of engineId 
    function updatesubscriptions(engineId, subscriptionType) { 
     var engine 
     for (var i = 0; i < $scope.subscriptionEnginesFromServer.length; i++) { 
      if ($scope.subscriptionEnginesFromServer[i].engine == engineId) { 
       engine = $scope.subscriptionEnginesFromServer[i] 
      } 
     } 

     engine.type = subscriptionType 
     engine.engine = engineId 
    } 

    $scope.updateSubscriptionType = function(engine) { 
     for (var i = 0; i < $scope.subscriptionEnginesFromServer.length; i++) { 
      updatesubscriptions($scope.subscriptionEnginesFromServer[i].engine, $scope.analyticsEmailSettings.subscription) 
     } 
    } 

    $scope.addSubscribedEngine = function(engine) { 
     $scope.subscriptionEngines = [] 
     engine.type = $scope.analyticsEmailSettings.subscription 

     $scope.subscriptionEnginesFromServer.push({ 
      type: engine.type, 
      engine: engine.id, 
      name: engine.name 
     }) 
    } 

    $scope.selectFirstUnsubscribedEngine = function() { 
     var filtered 
     filtered = $scope.engines.filter(function(x) { 
      return x.type == '' 
     }) 

     filtered = $filter('orderBy')(filtered, 'name') 

     $scope.engine.current = filtered.length ? filtered[0] : null 
    } 

    $scope.removeSubscribedEngine = function(engine) { 
     engine.type = '' 
     for (var i = 0; i < $scope.subscriptionEnginesFromServer.length; i++) { 
      if ($scope.subscriptionEnginesFromServer[i].engine == engine.id) { 
       $scope.subscriptionEnginesFromServer.splice(i, 1) 
      } 
     } 
     save() 
    } 
}]) 

ビュー：

<div ng-controller="UserSettingsCtrl" ng-init="init()"> 

<div class="content"> 

    <header class="flex-container row header"> 
     <div class="flex-1"> 
      <h1 class="flex-1">{{ 'user_settings_title' | translate }}</h1> 
     </div> 
     <!--<a class="logout" href ui-sref="account.settings.changepassword">{{ 'user_change_password_menu' | translate }}</a>--> 
    </header> 

    <div class="main-edit"> 
     <div class="subsection"> 
      <div class="inputs-container-row full-width"> 
       <div class="input-group full-width"> 
        <div class="inputfield"> 
         <label class="label ng-binding" for="name"> 
          {{ 'user_settings_firstname_label' | translate }} 
         </label> 
         <input type="text" name="firstname" ng-model="userInfo.firstName" class="flex-1" ng-class="{'first-letter-to-upper' : userInfo.firstName.length > 0 }" placeholder="{{ 'user_settings_firstname_placeholder' | translate }}"> 
        </div> 
       </div> 
       <div class="input-group full-width"> 
        <div class="inputfield"> 
         <label class="label ng-binding" for="name"> 
          {{ 'user_settings_lastname_label' | translate }} 
         </label> 
         <input type="text" name="lastname" ng-model="userInfo.lastName" class="flex-1" ng-class="{'first-letter-to-upper' : userInfo.lastName.length > 0 }" placeholder="{{ 'user_settings_lastname_placeholder' | translate }}"> 
        </div> 
       </div> 
      </div> 
      <div class="inputs-container-row full-width"> 
       <div class="inputs-container-row half-width"> 
        <div class="input-group full-width"> 
         <label class="label" for="name">{{ 'user_settings_language_label' | translate }}</label> 
         <div class="select-group full-width"> 
          <select class="select" id="selectLanguage" ng-model="userInfo.language" ng-options="key as value for (key , value) in availableLanguages"></select> 
          <label for="selectLanguage"><span class="fa fa-angle-down"></span></label> 
         </div> 
        </div> 
       </div> 
       <div class="inputs-container-row half-width"> 
        <div class="input-group full-width"> 
         <label class="label" for="name"> 
          {{ 'user_settings_phone_label' | translate }} 
         </label> 
         <input type="text" name="lastname" ng-model="userInfo.phoneNumber" placeholder="{{ 'user_settings_phone_placeholder' | translate }}"> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="subsection"> 
      <div class="inputs-container-row half-width"> 
       <div class="input-group full-width"> 
        <label class="label" for="name"> 
         {{ 'user_settings_password_label' | translate }} 
         <a ui-sref="account.settings.changepassword" class="button button-link--primary button--first"> 
          {{ 'user_settings_password_button' | translate }}... 
         </a> 
        </label> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="flex-container row header"> 
     <div class="flex-1"> 
      <h1 class="flex-1">{{ 'user_settings_emailStatistics_title' | translate }}</h1> 
     </div> 
    </div> 
    <!--||| Subscribe Start |||--> 
    <div class="main-edit"> 
     <div class="subsection"> 
      <div class="flex-container row"> 
       <div class="radiobutton-group"> 
        <div class="width-140"> 
         <input id="subscribed" type="checkbox" ng-model="analyticsEmailSettings.subscribed" value="subscribed" class="radiobutton"> 
         <label class="label highlight inline no-bottom-margin" for="subscribed"> 
          {{ 'user_settings_emailStatistics_subscribe' | translate }} 
         </label> 
        </div> 
       </div> 
      </div> 
      <div ng-show="analyticsEmailSettings.subscribed"> 
       <div class="flex-container row"> 
        <div class="input-group flex-1" ng-switch="analyticsEmailSettings.subscription"> 
         <label class="label" for="name">{{ 'user_settings_emailStatistics_recurrence' | translate }}</label> 
         <div class="inputs-container-row half-width" name="oftenReportSent"> 
          <span class="radiobutton flex-1" ng-class="{'checked' : analyticsEmailSettings.subscription === 'WeeklyAnalytics'}" name="radio"> 
           <input type="radio" name="WeeklyAnalytics" ng-model="analyticsEmailSettings.subscription" ng-change="updateSubscriptionType()" ng-checked="analyticsEmailSettings.subscription === 'WeeklyAnalytics'" value="WeeklyAnalytics" id="WeeklyAnalytics" ng-required=""> 
           <label for="WeeklyAnalytics">{{ 'user_settings_emailStatistics_weekly' | translate }}</label> 
          </span> 
          <span class="radiobutton flex-1" ng-class="{'checked' : analyticsEmailSettings.subscription === 'MonthlyAnalytics'}"> 
           <input type="radio" name="MonthlyAnalytics" ng-model="analyticsEmailSettings.subscription" ng-change="updateSubscriptionType()" ng-checked="analyticsEmailSettings.subscription === 'MonthlyAnalytics'" value="MonthlyAnalytics" id="MonthlyAnalytics" ng-required=""> 
           <label for="MonthlyAnalytics">{{ 'user_settings_emailStatistics_monthly' | translate }}</label> 
          </span> 
         </div> 
         <div> <span style="color:red;" ng-show="analyticsEmailSettings.subscription == null">Please select option</span></div> 
        </div> 
       </div> 
       <h1>Before</h1> 
       <div ng-if="engines.length == 1"> 
        <ul class="tags tags--inline item-with-inline-buttons"> 
         <li ng-repeat="engine in engines | orderBy:'name'"> 
          {{engine.name}} 
          <span class="button-icon button--primary button--delete" ng-click="removeSubscribedEngine(engine); selectFirstUnsubscribedEngine()"> 
           <i class="fa fa-trash-o"></i> 
          </span> 
         </li> 
        </ul> 
       </div> 
       <h1>after</h1> 
       <div ng-show="engines.length > 1"> 
        <div class="flex-container row" ng-show="((engines | filter:{type:''}:true).length != 0)"> 
         <div class="input-group full-width"> 
          <label class="label" for="selectEngine"> 
          {{ 'user_settings_emailStatistics_engines_label' | translate }}: 
         </label> 
          <div class="half-width inputfield--horizontal" style="margin-bottom: 10px;"> 
           <div class="full-width select-group" ng-if="(engines | filter:{type:''}:true).length > 0"> 

            <select class="select" id="selectEngine" ng-model="$parent.engine.current" ng-options="website.name for website in engines | filter:{type:''}:true | orderBy:'name'" ng-init="$parent.engine.current = (engines | filter:{type:''}:true | orderBy:'name')[0]"> 
           </select> 
            <label for="selectSubscription"><span class="fa fa-angle-down"></span></label> 
           </div> 
           <span ng-show="engines.length == 1">{{(engines | filter:{type:''}:true)[0].name}}</span> 
           <div id="btnAddWebSitesSubscription" ng-show="engines.length > 0" class="button button--add" ng-click="addSubscribedEngine(engine.current); selectFirstUnsubscribedEngine()"><i class="fa fa-plus"></i></div> 
          </div> 
         </div> 
        </div> 
        <div ng-model="successMessage" ng-show="showMessage" style="color:green;" class="message fadein fadeout">{{successMessage}}</div> 
       </div> 
       <h1 ng-show="subscriptionEnginesFromServer.length > 0 && engines.length > 1">Websites Subscribed</h1> 
       <div class="flex-container row" ng-if="subscriptionEnginesFromServer.length > 0 && engines.length > 1"> 
        <ul class="tags tags--inline item-with-inline-buttons"> 
         <li ng-repeat="engine in engines | filter:{type:'Analytics'} | orderBy:'name'"> 
          {{engine.name}} 
          <span class="button-icon button--primary button--delete" ng-click="removeSubscribedEngine(engine); selectFirstUnsubscribedEngine()"> 
           <i class="fa fa-trash-o"></i> 
          </span> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
     <footer class="flex-container flex-end row footer"> 
      <button class="button button--primary button--action" ng-click="save();"> 
        <i ng-show="loadingAction" class="fa fa-spinner fa-spinner-custom"></i> 
        <span ng-show="!loadingAction">{{ 'general_save' | translate }}</span> 
      </button> 
     </footer> 
    </div> 
</div> 

Answer 1

するときのようにNG-非表示/ NG-ショーを使用するように注意してください部分的に '隠れている'とすると、モデル内に（もしあれば）モデルが破壊されます（代わりにng-ifを使用します）。サブスクリプションのセクションで、あなたのHTML内

、あなたはこのような呼び出します

ng-change="updateSubscriptionType()" 

をしかし、あなたのJavaScriptで、あなたが持っている：

$scope.updateSubscriptionType = function(engine) { 
    for (var i = 0; i < $scope.subscriptionEnginesFromServer.length; i++) { 
    updatesubscriptions($scope.subscriptionEnginesFromServer[i].engine, $scope.analyticsEmailSettings.subscription) 
    } 
} 

だから、それはエンジン '引数を期待しています、そのあなたは決して渡すことはありません。しかし、コードを見れば、エンジンの議論は使用されません。 $ scope.subscriptionEnginesFromServer [i]の 'engine'プロパティを使用しますが、それだけです。

しかし、とにかく私が見ることはできません。空の配列をループして何かを行うにはupdatesubscriptions（）を呼び出しますが、実際には呼び出さないでしょう。

さらに、updatesubscriptions（）メソッド自体は実際に何もしません。これはたぶんあなたの配列に何も入っていない理由です。サブスクリプションラジオボタンがエンジンループの外側にあるので、テンプレートを少し修正することをお勧めします。そうすれば、サブスクリプションタイプをどのエンジンとも関連付けることができなくなります。あなたがそれをやったら、その後、サブスクリプションは、ラジオボタンは、あなたが渡すことができます「エンジン」、にアクセスする必要があります入力に応じて、あなたの方法を変更します。やや）（updatesubscriptionsを変更も

$scope.updateSubscriptionType = function(engine) { 
    if (!$scope.subscriptionEnginesFromService.includes(engine)) { 
    $scope.subscriptionEnginesFromService.push(engine); 
    } 
    updatesubscriptions(engine, $scope.analyticsEmailSettings.subscription); 
} 

をと。