-
-
Save johan--/fee884099f2667413ed46860dd1aa29a to your computer and use it in GitHub Desktop.
AngularJS 101: Trying to figure out how to make clone-able or duplicate-able form inputs and input groups.
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