AngularJS Example

by themhz

HTML

<div ng-app="">
    <div ng-controller="Ctrl">Value1:
        <input type="checkbox" ng-model="value1" ng-click="value1Clicked()">
        <br/>Value2:
        <input type="checkbox" ng-model="value2" ng-true-value="YEZ" ng-false-value="NOZ">
        <br/> <tt>value1 = {{value1}}</tt>
        <br/> <tt>value2 = {{value2}}</tt>
        <br/>
    </div>
    <div ng-controller="Ctrl2">Value3:
        <input type="checkbox" ng-model="value3" ng-click="value1Clicked()">
        <br/>Value4:
        <input type="checkbox" ng-model="value4" ng-true-value="YEZ" ng-false-value="NOZ">
        <br/> <tt>value3 = {{value3}}</tt>
        <br/> <tt>value4 = {{value4}}</tt>
        <br/>
    </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> <style> ​.ng-invalid {
    border: 1px solid red;
}
​

JavaScript

function Ctrl($scope) {
    $scope.value1 = true;
    $scope.value2 = "YEZ";
    $scope.value1Clicked = function () {
        ($scope.value1) ? $scope.value2 = "YEZ" : $scope.value2 = "NOZ";
    }
}

function Ctrl2($scope) {
    $scope.value3 = true;
    $scope.value4 = "YEZ";
    $scope.value1Clicked = function () {
        ($scope.value2) ? $scope.value3 = "YEZ" : $scope.value3 = "NOZ";
    }
}