AngularJS Example

by themhz

HTML

<div ng-app="">
  <div ng-controller="Ctrl">
    Alpha: <input type="checkbox" ng-model="arrayOfValues[0]" ng-click="value1Clicked()" ng-true-value="3" ng-false-value=""> <br/>
    Beta: <input type="checkbox" ng-model="arrayOfValues[1]" ng-click="value1Clicked()" ng-true-value="4" ng-false-value=""> <br/>
    Gama: <input type="checkbox" ng-model="arrayOfValues[2]" ng-click="value1Clicked()" ng-true-value="5" ng-false-value=""> <br/>
    Delta: <input type="checkbox" ng-model="arrayOfValues[3]" ng-click="value1Clicked()" ng-true-value="6" ng-false-value=""> <br/>
    <tt>value1 = {{arrayOfValues[0]}}</tt><br/>    
      <tt>value2 = {{arrayOfValues[1]}}</tt><br/>    
      <tt>value3 = {{arrayOfValues[2]}}</tt><br/>    
      <tt>value4 = {{arrayOfValues[3]}}</tt><br/>    
      <tt>selected Values Delimited = {{selectedValuesDelimited}}</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.arrayOfValues = new Array();
  $scope.selectedValuesDelimited="";
  $scope.listOfCheckedBoxes = new Array();  
  $scope.value1Clicked = function() {
      $scope.arrayOfValues[0]=="3"?$scope.arrayOfValues[0]="3":$scope.arrayOfValues[0]="";
      $scope.arrayOfValues[1]=="4"?$scope.arrayOfValues[1]="4":$scope.arrayOfValues[1]="";
      $scope.arrayOfValues[2]=="5"?$scope.arrayOfValues[2]="5":$scope.arrayOfValues[2]="";
      $scope.arrayOfValues[3]=="6"?$scope.arrayOfValues[3]="6":$scope.arrayOfValues[3]="";      
      $scope.selectedValuesDelimited =$scope.arrayOfValues.clean("").join(",");
  }  
}


Array.prototype.clean = function(deleteValue) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] == deleteValue) {         
      this.splice(i, 1);
      i--;
    }
  }
  return this;
};