私はAngularJsでディレクティブがどのように機能するかを理解しようとしていますが、これは私が扱っているオブジェクトですが、はるかに簡単なオブジェクト管理する。ディレクティブ内の2番目のオブジェクトのみにアクセスしてテンプレートを作成する
angular.module('AngularJsExercise.controllers', []).
controller('angularJsExerciseController', function($scope, angularJsServices) {
$scope.advisor = {
name : "TheTitle",
pages: [
{
id: 1,
pageNum: 0,
pageText: "First Page",
questions: [
{
id: 11,
questionText: "I am looking for a new printer for...",
questionType: "RADIO_BUTTONS",
mandatory: true
}
]
},
{
id: 2,
pageNum: 1,
pageText: "Second Page",
questions: [
{
id: 22,
questionText: "Printer should have..",
questionType: "CHECKBOX",
mandatory: false
},
{
id: 22,
questionText: "What color ?",
questionType: "CHECKBOX",
mandatory: false
}
]
},
{
id: 3,
pageNum: 2,
pageText: "Third Page",
questions: [
{
id: 33,
questionText: "I am looking for a new printer for...",
questionType: "RADIO_BUTTONS",
mandatory: true
}
]
},
{
id: 4,
pageNum: 3,
pageText: "Fourth Page",
questions: [
{
id: 44,
questionText: "Price range",
questionType: "SINGLE_SLIDER",
mandatory: false
},
{
id: 444,
questionText: "Printer size",
questionType: "DOUBLE_SLIDER",
mandatory: false
}
]
}
]
};
私は/表示することができますどのように、私は唯一のオブジェクトの第二部、「ページ」でテンプレートを作成したいが、それはまた私のタイトルである第一の部分をもたらすには、単一のページ要素を表しますこのタイプの複雑なオブジェクトには、すべての賛否両論がありますか?ここに私のディレクティブです:
angular.module('AngularJsExercise.controllers')
.directive('advisorPage', function() {
return {
restrict: 'E',
scope:{
data: '='
},
// template: "<h1>{{advisor.name}}</h1>", <-- I want this part to have all of the attributes of the second object to display.
controller: function($scope){
console.log($scope.data);
},
templateUrl: 'advisorPage.template'
};
});
そして、ここで私はあなたが1ページを表し、ループ内でそれを使用するディレクティブを作成する必要が修正わかるように、最後の部分
angular.module('AngularJsExercise', [
'AngularJsExercise.services',
'AngularJsExercise.controllers',
'AngularJsExercise.filters'
]);
<div ng-app="AngularJsExercise" ng-controller="angularJsExerciseController">
<!-- display pages with questions -->
<div ng-repeat="adv in advisor">
<advisor-page data='adv'> </advisor-page>
</div>
<!-- advisorPage directive template -->
<script type="text/ng-template" id="advisorPage.template">
</script>
</div>
$ scope.advisorの内容を別の方法で並べ替えると、おそらく配列になることはありますか?この方法では、ng-repeatはその配列の要素を繰り返し処理します。もう1つのオプションはadvisorの代わりにadvisor.pagesを反復することです。 – AndresEC