1

ネットで調べたものの、ng-repeat で生成されたDom?のvalue値を ng-repeat スコープ外で使う方法が見つからず。まず根本的に出来るのかもわからず困っています。

sampleAJS.html

<ons-list class="list">

  <ons-list-item ng-repeat="product in history track by $index" class="list__item">
      <select class="num" ng-model="countNumber" ng-options="c.value as c.name for c in countList"></select>
      //このローカルスコープ内で動的に変更した value 値を元に計算しGlobalに代入したい
  </ons-list-item>

</ons-list>

sampleAJS.js

$scope.countList = [
    {"value" : 1, "name" : "1"},
    {"value" : 2, "name" : "2"},
    {"value" : 3, "name" : "3"},
    {"value" : 4, "name" : "4"},
    {"value" : 5, "name" : "5"}
];
$scope.countNumber = $scope.countList[0].value;//1

具体的にJSで説明すると、こんな感じです。

JSsample.html

  <select class="num0">
    <option value="1" name="1">1</option>
    <option value="2" name="1">2</option>
    <option value="3" name="1">3</option>
    <option value="4" name="1">4</option>
    <option value="5" name="1">5</option>
  </select>

  <select class="num1">
    <option value="1" name="1">1</option>
    <option value="2" name="1">2</option>
    <option value="3" name="1">3</option>
    <option value="4" name="1">4</option>
    <option value="5" name="1">5</option>
  </select>

  <button id="check">checkButton</button>//anglarではクリックイベント無しで呼べたら嬉しい

JSsample.js

$(function(){
  var g_score = [];
  var $button = $('#check');
  var len = $('select').length;

  $button.click(function(){
    for(var i = 0; i < len; i++) {
      g_score[i] = $('.num' + i).val();
      console.log(g_score[i]);
    }
  })

});
2
  • スコープ外から使うシチュエーションが分かりません。外部からでもスコープを呼び出して使えばいいのでは?
    – user10259
    Commented 2015年11月28日 8:13
  • 質問、説明の仕方が悪かったのと、anglarJSについての理解が足りてなさすぎでしたね 。 ng-repeat 内で作成された個々のセレクトボックスのvalue値が変更されたら、動的に計算してglobal変数みたいなものに入れたかったんですが、html上で計算した値を入れようとしていたので、考え方自体、間違っていました。でもng-model使えばいけるのかな? 計算した個別の結果だけ欲しかったので、ng-repeatで回す事ができなかったのですよね。
    – Sawasawato
    Commented 2015年11月30日 7:12

2 件の回答 2

0

あえてグローバル変数に入れる理由は無いような気がしますが、コントローラの中で行った計算結果を$window$rootScopeのプロパティとして代入するのが一つの方法だと思います。

angular.module('app', ['onsen'])
.controller('PageController', function($scope, $window){
  $scope.sum = 0;
  $scope.history = ['product1', 'product2', 'product3'];
  $scope.countOptions = [1,2,3,4,5];
  $scope.models = [];
  $scope.checkSum = function(){
    var sum = $scope.models.reduce(function(sum, current){
      return sum + current;
    }, 0);
    $scope.sum = sum;
    $window.sum = sum;
  };
});
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.13/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.13/build/css/onsenui.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.13/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.13/build/js/onsenui.min.js"></script>

<body ng-app="app" ng-controller="PageController">
  <ons-list>
    <ons-list-item ng-repeat="product in history">
      {{product}}
      <select ng-model="models[$index]" ng-options="n as n for n in countOptions"></select>
    </ons-list-item>
  </ons-list>

  <button ng-click="checkSum()">Check</button>
  <span class="sum">{{sum}}</span>
</body>

1
  • ありがとうございます!勉強になりました。 スコープ外というのを強調したくてGlobalとしましたが、汚染するので RootScopeが希望でした。まさに知りたかった事です。最高です!重ね重ねとなりますが、ありがとうございました。
    – Sawasawato
    Commented 2015年12月1日 8:51
-1

色々調べたものの、解決方法は出てこず、考え方自体間違っていたのかな?

ng-repeat 内は $index で連番ふれるので、idに連番ふってイベントで値取得、
総数はクラスふって取得、最後forで回す。
というごり押しで対応。

anglar活かしてなくて、全然スマートじゃないのが残念。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。