$ scope 변수를 기반으로 버튼을 업데이트하고 표시해야합니다.

Question

이것은 설문 조사 응용 프로그램입니다. 질문에 선택을하는 데 사용되는 일련의 단추 인 지시문이 있습니다. 각 질문은 선택 항목 점수가있는 JSON 객체입니다. 선택한 점수에 해당하는 버튼을 강조 표시하고 선택하지 않은 버튼을 클릭하여 점수를 변경하고 싶습니다.

각도 방법으로 먼저 대화하는 방법에 대해 머리를 써야하기 때문에 아직 컨트롤러에 updateQuestion()을 작성하지 않았습니다.

버튼의 지시

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}]} 

<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> 

Answer 1

난 당신이 할 수 있도록, 응답과 함께 질문을 연결해야 믿습니다 관련 HTML 모델을 전달하기 위해 격리 된 범위를 만드는 지시문. 격리 된 범위에서 지시문 내에서 모델에 액세스 할 수 있지만 지시문은 재사용 가능성을 상실합니다. 자체에 포함 된 확인하는 것이 좋습니다 그래서.) 버튼을 강조 들어

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