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' ng-app="myApp">
  <div>
    <!-- your widget template -->
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title" align="center">
          Select the options below to make a request:
        </h3>
      </div>

      <body>
        <div class="btn-group btn-group-justified">
          <div ng-repeat="item in data.items">
            <input type="radio" name="item" ng-checked="$first" id="{{::item.name}}" ng-click="update(item.sys_id)">
            <label class="form-check-label" align="center">
                        <h5> {{::item.name}}</h5>
                    </label>
          </div>
          <div>
            <input type="radio" name="select-service" ng-model="result" id="service3" ng-value="'Other'">
            <label class="form-check-label" align="center">
                        <h5> OTHER</h5>
                    </label>
          </div>
        </div>
        <div ng-if="result=='Other'" class="md-block" style="width: 600px">
          <span>Select the item that you are interested</span>
          <sn-record-picker id="item1" field="location" table="'u_sc_cat_item_ext'" display-fields="'name,sc_catalogs'" value-field="'sys_id'" search-fields="'name'" default-query="data.queryString">
          </sn-record-picker>
        </div>
        <br>
        <br>
        <button type="button" class="btn btn-primary btn-lg" id="proceed1" ng-click="RequestService()">Proceed</button>
      </body>
    </div>
  </div>
  {{data.items}}<br> {{selected}}
</div>

JavaScript

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

app.controller('MyController', function MyController($scope) {
  $scope.selected = '';
  $scope.data = {
    items: [{
        'name': 'test',
        'sys_id': 1,
      },
      {
        'name': 'test2',
        'sys_id': 2,
      }

    ]
  }
  $scope.update = function(val) {
    $scope.selected = val;
  }
});