Forked from commercial-hippie/angular_test.html
Last active
February 24, 2016 14:36
-
-
Save sancau/5d5438d707dc3d57d30f to your computer and use it in GitHub Desktop.
AngularJS | Form blocks cloning by user request
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app="sasApp"> | |
| <head> | |
| <title>AngularJS Test</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"> | |
| <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> | |
| <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> | |
| <!--[if lt IE 9]> | |
| <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> | |
| <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> | |
| <![endif]--> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>AngularJS</h1> | |
| <div ng-controller="MultipleFieldCtrl" ng-init="name = 'Value[block]'"> | |
| <div ng-repeat="fieldGroup in fieldGroups" class="well"> | |
| <div class="form-group"> | |
| <label for="">Text</label> | |
| <input ng-model="fieldGroup.text" name="{{ getName($index) }}" type="text" class="form-control"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="">Href</label> | |
| <input ng-model="fieldGroup.href" name="{{ getName($index) }}" type="text" class="form-control"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="">Color</label> | |
| <select ng-model="fieldGroup.select" name="{{ getName($index) }}" type="text" class="form-control"> | |
| <option value="blue">Blue</option> | |
| <option value="green">Green</option> | |
| <option value="red">Red</option> | |
| </select> | |
| </div> | |
| <button ng-click="delete(fieldGroup)" class="btn btn-danger btn-sm">Remove</button> | |
| </div> | |
| <button ng-click="clone()" class="btn btn-primary">Clone</button> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| var sasApp = angular.module('sasApp', []); | |
| sasApp.controller('MultipleFieldCtrl', function ($scope) { | |
| $scope.fieldGroups = [ | |
| { | |
| 'text': 'value 1', | |
| 'href': 'value 1', | |
| 'select': 'green' | |
| }, | |
| { | |
| 'text': 'value 2', | |
| 'href': 'value 2', | |
| 'select': 'red' | |
| } | |
| ]; | |
| $scope.getName = function ( $index) { | |
| return $scope.name + '[' + $index + ']'; | |
| } | |
| $scope.clone = function() { | |
| $scope.fieldGroups.push({}); | |
| } | |
| $scope.delete = function(fieldGroup) { | |
| var index = $scope.fieldGroups.indexOf(fieldGroup); | |
| $scope.fieldGroups.splice(index, 1); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment