1

アンケートアプリです。質問を選択するために使用される一連のボタンであるディレクティブがあります。各質問は、選択のスコアを含む JSON オブジェクトです。選択したスコアに対応するボタンを強調表示し、選択していないボタンをクリックしてスコアを変更したいと思います。

updateQuestion() をコントローラーにまだ書いていません。最初に Angular の方法で会話させる方法を理解する必要があるからです。

ボタンの指示 

giftsAppsModule.directive('questionChoice',function(){
return {
    restrict: 'E',
    replace: true,
    template :'<div class="btn-group btn-group-vertical">' +
        '<button class="btn btn-block" ng-click="updateQuestion(5)">Love It</button>' +
        '<button class="btn btn-block" ng-click="updateQuestion(3)">Enjoy It</button>'+
        '<button class="btn btn-block" ng-click="updateQuestion(2)">Maybe</button>' +
        '<button class="btn btn-block" ng-click="updateQuestion(1)">Probably not</button>'+
        '<button class="btn btn-block" ng-click="updateQuestion(0)">No way!</button></div>'
}

質問

    questionlist= [
    {"index": 1, "question": "Rejoice in God's provision even when the checkbook is in the red.", "gift": "FTH", "score": null},
    {"index": 2, "question": "Clean the kitchen once a week.", "gift": "SVC", "score": null},
    {"index": 3, "question": "Build sets for a drama.", "gift": "CFT", "score": null},
    {"index": 4, "question": "Search the Bible to check the validity of a sermon or Bible lesson.", "gift": "DSC", "score": null}]}

関連するhtml

<div ng-repeat="question in questionlist">
  <div class="row-fluid">
    <div class="span6">
      <p>{{question.index}}. {{question.question}}</p>
    </div>
    <div class="span6">
      <question-choice></question-choice>
    </div>
  </div>
</div>
4

1 に答える 1

1

モデルを渡すためにディレクティブに分離スコープを作成させることができるように、質問を応答に関連付ける必要があると思います (分離スコープを作成しなくても、ディレクティブ内のモデルにアクセスできますが、ディレクティブは再利用性を失います。そのため、自己完結型にすることをお勧めします。)

App.directive('questionChoice', function () {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            ngModel: '='
        },
        template: '<div class="btn-group btn-group-vertical">' +
            '<button ng-class="{\'button-hl\':ngModel.score == 5}" class="btn btn-block" ng-click="updateQuestion(ngModel, 5)">Love It</button>' +
            '<button ng-class="{\'button-hl\':ngModel.score == 3}" class="btn btn-block" ng-click="updateQuestion(ngModel, 3)">Enjoy It</button>' +
            '<button ng-class="{\'button-hl\':ngModel.score == 2}" class="btn btn-block" ng-click="updateQuestion(ngModel, 2)">Maybe</button>' +
            '<button ng-class="{\'button-hl\':ngModel.score == 1}" class="btn btn-block" ng-click="updateQuestion(ngModel, 1)">Probably not</button>' +
            '<button ng-class="{\'button-hl\':ngModel.score == 0}" class="btn btn-block" ng-click="updateQuestion(ngModel, 0)">No way!</button></div>',
        link: function (scope, element, attrs) {
            scope.updateQuestion = function (question, v) {
                question.score = v;
            }
        }
    }
});

ボタンの強調表示については、ng-classロジックを使用して実装できます。デモをご覧ください。

Working Demo

于 2013-09-03T01:46:58.110 に答える