JSFiddle - React, Tailwind, and code Playground

Dynamic Form Names

by ckosloski

HTML

<link rel="stylesheet" href="http://vitalets.github.io/angular-xeditable/dist/css/xeditable.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://vitalets.github.io/angular-xeditable/dist/css/xeditable.css">
<h4>Angular-xeditable Trigger manually (Bootstrap 3)</h4>



<div ng-app="app" ng-controller="Ctrl"> 
    
    <h5>e-form: testForm</h5>
    
    <div ng-repeat="user in users" ng-include="'users.tpl'">      
    </div>
    <hr />    
    <h5>e-form: User Id</h6>
    
    <div ng-repeat="user in users" ng-include="'users2.tpl'">      
    </div>
    
    <script type="text/ng-template" id="users.tpl">
        <span editable-text="user.name" e-form="testForm">
            {{ user.name || 'empty' }}
          </span>

        <button type="button" class="btn btn-default" ng-click="testForm.$show()" ng-hide="testForm.$visible">edit</button>   
        
         <br /> 
        
        <div ng-repeat="user in user.users"     ng-include="'users.tpl'">      
        </div>
    </script>   
    
    <script type="text/ng-template" id="users2.tpl">
<span editable-text="user.name" e-form="form1">
        {{ user.name || 'empty' }}
      </a>

        <button type="button" class="btn btn-default" ng-click="form1.$show()" ng-hide="form1.$visible">edit</button> 
        
         <br /> 
        
        <div ng-repeat="user in user.users"      ng-include="'users2.tpl'">      
    </div>
    </script>

CSS

div[ng-app] {
    margin: 50px;
}

h5 {
    font-weight:bold;
    color:#bbb;
}

JavaScript

var app = angular.module("app", ["xeditable"]);

app.run(function (editableOptions) {
    editableOptions.theme = 'bs3';
});

app.controller('Ctrl', function ($scope) {

    $scope.user = {
        id: '1',
        name: 'awesome',
        users: [{
            id: '3',
            name: '3',
            users: []
        }, {
            id: '4',
            name: '4',
            users: []
        }]
    };

    $scope.user2 = {
        id: '2',
        name: 'anonymous',
        users: []
    };

    $scope.users = [
    $scope.user, $scope.user2];
    
    $scope.showForm = function(formNumber) {
      eval('$scope.form' + formNumber).$show();
    };
        
    $scope.hideForm = function(formNumber) {
      eval('$scope.form' + formNumber).$visible;
    };
});