QA@IT

ng-repeatでチェックボックス付きのリストを作る方法

2444 PV

チェックボックスのついたタイムテーブルを、ng-repeatを使って表示させようと試みています。
tmset関数で配列をセットしてforでloopさせました。

console.logに期待通り
[{id:1, name:9:00, value: 1422XXXXX},{id:2, name:9:30, value: 1422XXXXX},{id:3, name:10:00, value: 1422XXXXX},.....{id:6, name:11:00, value: 1422XXXXX}]

と表示させるところまではできたのですが、
肝心のviewに反映できず、チェックボックスのボックスだけが想定以上の数並ぶだけです。
行き詰まっておりますのでお力をお貸しいただけると幸いです。

HTML


<li ng-repeat="koma in komas track by $index">
    <label><input type="checkbox" ng-model="koma.checked">{{koma.name}}</label>
  </li>
</ul>
<button ng-click="check()">チェック</button>  

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Js

function tmset(i, timeString, firsTimeStamp) {
                     this.id = i;
                       this.name = timeString;
                         this.value = firstTimeStamp;
                   }
        var komaList =[];         

          for(var i =1; firstTimeStamp < lastTimestamp ; firstTimeStamp += unit, i++){
                  var ts = firstTimeStamp;
                  var d = new Date( ts * 1000 );
                  var year  = d.getFullYear();
                  var month = d.getMonth() + 1;
                  var day  = d.getDate();
                  var hour = ( d.getHours()   < 10 ) ? '0' + d.getHours()   : d.getHours();
                  var min  = ( d.getMinutes() < 10 ) ? '0' + d.getMinutes() : d.getMinutes();
                 // var sec   = ( d.getSeconds() < 10 ) ? '0' + d.getSeconds() : d.getSeconds();
                  var timeString = (hour + ':' + min);

         var tmsetObject = new tmset(i, timeString,firsTimeStamp);
         komaList.push(tmsetObject);
 }

console.log(JSON.stringify(komaList));
$scope.komas = (JSON.stringify(komaList));

回答

firstTimeStamp や lastTimestamp が無いのと、
console.logで出たそのままを提示してくれなかったので再現はできません
(どっちか正しければ回答しやすかったです)

ソース見るに特に理由がなければ JSON.stringifyしたものをモデルにしているからだと思います。
チェックボックスは文字数分でているはず。

$scope.komas = komaList;にしてください。
たぶんコピペかなにかでのミスだと思いますが、そうでないなら(JSON.stringifyが何かわかっていないなら)JSON.stringifyが何か調べるとよいでしょう。

編集 履歴 (0)
  • ご回答いただきありがとうございます。
    $scope.komas = komaList;にすると見事解決しました。
    console.logの方にJSON.stringifyを使って正常に表示されていたので、てっきり必要かと思ったのですが、おっしゃる通りJSON.stringifyを理解できていませんでした。
    もう一度勉強してみます。
    この度は大変助かりました。ありがとうございます。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。