AngularJS Hello World

In this example, we do a very simple AngularJS example.

by Kai_Draord

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<div ng-controller='MyController as vm' ng-app="myApp">
  <div>
    <h3>With a simple array as input data</h3>
    <div class="row">
      <div class="col-md-6">
        <div class="form-group" ng-repeat="reviewer in vm.reviewerList">
          <label class="checkbox-inline">
                                        <input type="checkbox" name="selectedFruits[]" value="{{reviewer}}" ng-checked="vm.selectedReviewer.indexOf(reviewer) > -1" ng-click="vm.reviewerSelect(reviewer)"> {{reviewer.Name}}                                       
                                        <input type="text" name="TotalReviewMargin" ng-model="reviewer.ReviewCollectMargin">
                                        <input type="text" name="TotalReviewMargin" ng-model="reviewer.PerReviewCost">
                                    </label>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <h4>selected Reviewer</h4>
        <pre>{{vm.selectedReviewer|json}}</pre>
      </div>
    </div>
  </div>
</div>

JavaScript

var app = angular.module('myApp', []);

app.controller('MyController', function MyController($scope) {
this.reviewerList = [{name: "test", ReviewCollectMargin: 10, PerReviewCost: 12}, {name: "test2", ReviewCollectMargin: 10, PerReviewCost: 12}, {name: "test3", ReviewCollectMargin: 10, PerReviewCost: 12}];
  this.selectedReviewer = [];
  // selected on a given reviewer by name
  this.reviewerSelect = function(reviewer) {
    var idx = this.selectedReviewer.indexOf(reviewer);
    // is currently selected
    if (idx > -1) {
      this.selectedReviewer.splice(idx, 1);
    }
    // is newly selected
    else {
      this.selectedReviewer.push(reviewer);
    }
  }
});