Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
​
  <head>
    
    <!-- Twitter bootstrap -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
​
    <!-- apiCheck is used by formly to validate its api -->
    <script src="//npmcdn.com/api-check@latest/dist/api-check.js"></script>
    <!-- This is the latest version of angular (at the time this template was created) -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
​
    <!-- This is the latest version of formly core. -->
    <script src="//npmcdn.com/angular-formly@latest/dist/formly.js"></script>
    <!-- This is the latest version of formly bootstrap templates -->
    <script src="//npmcdn.com/angular-formly-templates-bootstrap@latest/dist/angular-formly-templates-bootstrap.js"></script>
​
    <title>Angular Formly issue</title>
  </head>
​
  <body ng-app="app" ng-controller="MainCtrl as vm" class="container">
    <h1>
      <a ng-href="{{::vm.baseUrl}}">Angular Formly</a>
      Bug
      <a ng-if="vm.issueNumber" ng-href="{{::vm.baseUrl}}/issues/{{::vm.issueNumber}}">
        #{{::vm.issueNumber}}
      </a>
      <small ng-if="!vm.issueNumber">
        <a ng-href="{{::vm.baseUrl}}/blob/master/CONTRIBUTING.md">
          Issue not provided
        </a>
      </small>
    </h1>
    <div>
      <h2>Environment:</h2>
      <div>
        Angular Version:
        <strong>
          <a ng-href="https://code.angularjs.org/{{::vm.env.angularVersion}}/docs/api">
            {{::vm.env.angularVersion}}
          </a>
        </strong>
      </div>
      <div>
        Formly Version:
        <strong>
          <a ng-href="{{::vm.baseUrl}}/tree/{{::vm.env.formlyVersion}}">
            {{::vm.env.formlyVersion}}
          </a>
        </strong>
      </div>
    </div>
​
    <div>
      <h2>Bug replication instructions:</h2>
​
      TODO: Please describe how to reproduce the issue here.
    </div>
​
    <hr />
    
    <div>
      <h2>Form</h2>
      <form ng-submit="vm.onSubmit()" novalidate>
        <formly-form model="vm.formData" fields="vm.formFields">
          <button type="submit" class="btn btn-primary">Submit</button>
        </formly-form>
      </form>
      <h2>Form Data</h2>
      <pre>{{vm.formData | json}}</pre>
    </div>
​
  </body>
​
</html>
​
 
(function() {
  /* global angular */
  
  'use strict';
​
  var app = angular.module('app', ['formly', 'formlyBootstrap'], function config(formlyConfigProvider) {
    // set templates here
    formlyConfigProvider.setType({
      name: 'custom',
      templateUrl: 'custom.html'
    });
  });
  
​
  app.controller('MainCtrl', function MainCtrl($scope, formlyVersion) {
    var vm = this;
    // funcation assignment
    vm.onSubmit = onSubmit;
​
    // variable assignment
    vm.baseUrl = 'https://github.com/formly-js/angular-formly';
    vm.issueNumber = 345;
    vm.env = {
      angularVersion: angular.version.full,
      formlyVersion: formlyVersion
    };
​
    vm.formData = {};
​
    vm.formFields = [
      {
        key: 'sport',
        type: 'select',
        templateOptions: {
          label: 'Sport',
          options: [],
          valueProp: 'id',
          labelProp: 'name',
        },
        controller: /* @ngInject */ function($scope, DataService) {
          $scope.to.loading = DataService.sports().then(function(response){
            $scope.to.options = response;
            return response;
          });
          
        }
      },
      {
        key: 'team',
        type: 'select',
        templateOptions: {
          label: 'Team',
          options: [],
          valueProp: 'id',
          labelProp: 'name',
        },
        controller: /* @ngInject */ function($scope, DataService) {
            $scope.$watch('model.sport', function (newValue, oldValue, theScope) {
              if(newValue !== oldValue) {
                // logic to reload this select's options asynchronusly based on state's value (newValue)
                console.log('new value is different from old value');
                if($scope.model[$scope.options.key] && oldValue) {
                  // reset this select
                  $scope.model[$scope.options.key] = '';
                } 
                // Reload options
                $scope.to.loading = DataService.teams(newValue).then(function (res) {
                  $scope.to.options = res;
                });
              }
            });
        
        }
      },
      {
        key: 'player',
        type: 'select',
        templateOptions: {
          label: 'Player',
          options: [],
          valueProp: 'id',
          labelProp: 'name',
        },
        controller: /* @ngInject */ function($scope, DataService) {
            $scope.$watch('model.team', function (newValue, oldValue, theScope) {
              if(newValue !== oldValue) {
                // logic to reload this select's options asynchronusly based on state's value (newValue)
                console.log('new value is different from old value');
                if($scope.model[$scope.options.key] && oldValue) {
                  // reset this select
                  $scope.model[$scope.options.key] = '';
                } 
                // Reload options
                $scope.to.loading = DataService.players(newValue).then(function (res) {
                  $scope.to.options = res;
                });
              }
            });
        
        }
      }
    ];
​
    // function definition
    function onSubmit() {
      alert(JSON.stringify(vm.formData), null, 2);
    }
  });
  
  app.factory('DataService', function DataService($http, $q){
    return {
      sports: sports,
      teams: teams,
      players: players
    };
​
    function sports() {
      var deferred = $q.defer();
      // dummy data
      var data = [{
          id: 1,
          name: 'Soccer'
        }, {
          id: 2,
          name: 'Basketball'
      }];
      deferred.resolve(data);
      return deferred.promise;
    }
    
    function teams(sport_id) {
      var deferred = $q.defer();
      // dummy data
      var data = [{
          id: 1,
          fk: 1,
          name: 'Bayern Munich'
        }, {
          id: 2,
          fk: 1,
          name: 'Real Madrid'
        }, {
          id: 3,
          fk: 2,
          name: 'Cleveland'
      }];
      if(!!sport_id) {
        var tmp = [];
        angular.forEach(data, function(val) {
          if(val.fk === sport_id)
            tmp.push(val);
        });
         deferred.resolve(tmp);
      } else {
         deferred.resolve(data);
      }
      
      
      return deferred.promise;
    }
    
    function players(team_id) {
      var deferred = $q.defer();
      // dummy data
      var data = [{
          id: 1,
          fk: 1,
          name: 'Mario Götze'
        }, {
          id: 1,
          fk: 2,
          name: 'Javier Hernandez'
        }, {
          id: 2,
          fk: 3,
          name: 'LeBron James'
      }];
      if(!!team_id) {
        var tmp = [];
        angular.forEach(data, function(val) {
          if(val.fk === team_id)
            tmp.push(val);
        });
         deferred.resolve(tmp);
      } else {
         deferred.resolve(data);
      }
      
      
      return deferred.promise;
    }
    
  });
​
})();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers