토글 단추에 대한 지시문

Question

YES/NO 토글 단추를 작성하라는 지시문을 작성하려고합니다. 심지어 내 HTML 레이아웃을 확인하는 경우 지금은 아무 생각하지만 지금까지 나는이 한 : 나는 실제적으로이

그래서 컨트롤러에 나중에 모델을 사용할 수있는 UI에 추가해야 HTML을의

<div class="toggle" toggle-button"><input type="checkbox" ng-model="confirms" /></div> 
<div class="toggle" toggle-button"><input type="checkbox" ng-model="listresults" /></div> 

을, 이 예와 같이 YES/NO 버튼이 많은 설정 페이지.

지시문이 버튼에 들어가면 각 ng-model의 값에 따라 빨간색 또는 녹색으로 표시되어야합니다 (confirms = false이면 버튼이 빨간색이어야하고 listresults는 두 번째 버튼이 녹색이어야 함). 이제 버튼을 누르면, ng-model의 값을 false에서 true 또는 vice versse로 변경해야하고, 토글 클래스 근처에 'on'클래스를 추가하거나 제거해야합니다. 그래서 그 안에 디자인을 만들 수 있습니다. 버튼

내 전체 HTML은 다음과 같아야합니다

<div class="toggle" toggle-button> 
    <input type="checkbox" ng-model="listresults" /> 
    <div class="toggle-inner"> 
     <div class="toggle-inner-yes"></div> 
     <div class="toggle-inner-no"></div> 
    </div> 
</div> 

지금까지 내가 이런 짓을, 내 방식이 맞다면, 당신은 더 좋은 생각이 있으면 알려 주시기 바랍니다 모르겠어요.

myApp.directive('toggleButton', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, elem, attr) { 

      // add elem 
      var html = angular.element('<div class="toggled"><div class="on"></div><div class="off"></div></div>'); 
      elem.append(html); 

      elem.bind('click', function() { 
       alert('a'); 
      }); 
     } 
    } 
}); 

은 지금은 단지 버튼 내부의 HTML의 나머지 부분을 추가하고 클릭 이벤트를 추가하지만 난 방법, 훨씬 적은 변화 지시어에 입력에서 각 NG 모델의 값을 취득하는 아무 생각이 ng-model을 true에서 false로 바꾸고 버튼 자체에 'on'클래스를 추가하거나 제거하십시오.

감사의 말 : 속성을 통해 지시어하는 http://plnkr.co/edit/yRWumtd7RwLksFowBRmc?p=preview

패스 모델 :

Answer 1

는 다음을 시도 할 수 있습니다. 지시문의 범위 정의에 '=' 값을 사용하여 전달 된 속성에 대한 양방향 바인딩을 만듭니다. 지침 내에서 ng-class 지시문을 사용하여 토글 버튼에서 클래스를 전환합니다. ng-click을 사용하여 외부 컨트롤러의 범위에 묶여있는 데이터를 토글합니다.

HTML

<div ng-controller="ctrl"> 
    <div toggle="item" ng-repeat="item in items"></div> 
</div> 

자바 스크립트

angular.module('app',[]). 
    controller('ctrl', ['$scope', function($scope) { 
    $scope.items = [{ 
     text: 'Setting 1', 
     checked: false 
    }, { 
     text: 'Setting 2', 
     checked: false 
    }, { 
     text: 'Setting 3', 
     checked: false 
    }] 
    }]). 
    directive('toggle', function() { 
    return { 
     scope: { 
     toggle: '=' 
     }, 
     template: '<div ng-click="toggle.checked=!toggle.checked" ng-class="{\'toggle\':true, \'toggle-inner-yes\':toggle.checked, \'toggle-inner-no\':!toggle.checked}">{{toggle.text}}</div>', 
     replace: true 
    } 
    }); 

CSS

.toggle { 
    border: 1px solid silver; 
    display: inline-block; 
    margin: 0.5em; 
    padding: 0.5em; 
    color: white; 
} 

.toggle-inner-yes { 
    background-color: green; 
} 

.toggle-inner-no { 
    background-color: red; 
}