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 ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div data-ng-controller="Main">
​
    <div class="row">
        <div class="small-12 columns">
            <h2>Your Resumes</h2>
        </div>
    </div>
​
    <div class="row">
        <div class="small-12 columns">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Category</th>
                        <th>Date Added</th>
                        <th>View/Edit Resume</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="resume in resumes">
                        <td>{{ resume.name }}</td>
                        <td>{{ resume.category }}</td>
                        <td>{{ resume.date_added }}</td>
                        <td><button view-large-content data-ng-model="resume.content" index="le" >View Resume</button></td>
                    </tr>
                </tbody>
            <table>
        </div>
    </div>
​
</div>
</body>
</html>
 
var app = angular.module('app', []);
​
app.controller('Main', function ($scope) {
​
  $scope.resumes = [
    {name: "a", category: 1, date_added: 1, content: "content"},
    {name: "a", category: 1, date_added: 1, content: "content"}
  ];
});
​
app.directive('viewLargeContent', function() {
    return {
        scope: {
            index: '@' 
        },
        require: 'ngModel',
        link: function (scope, el, attrs, ngModel) {
​
            console.log(scope);
​
            function openEditor() {
                console.log(scope.index);
​
                var main_container = angular.element('.main_container');
                var view_frame = angular.element('.view-frame');
​
                console.log(ngModel);
​
                main_container.append('<div class="dimmer"></div>');
                main_container.append(
​
                        '<div class="large-content' + index + '">' +   '<textarea>' + ngModel.$viewValue + '</textarea>'  +   '<button>Submit Changes</button>' +   '</div>'
                );  
​
                var dimmer = angular.element('.dimmer');
                var content_container = angular.element('.large-content' + index);      
​
                // content_container.css({ marginTop: (content_container.height()/-2), width: view_frame.width(), marginLeft: (view_frame.width()/-2) })
                content_container.css({ height: (0.8*main_container.height()), width: view_frame.width(), marginLeft: (view_frame.width()/-2)  });
​
                content_container.find('button').on('click', function() {
                    var new_content = content_container.find('textarea').get(0).value;
​
                    ngModel.$setViewValue(new_content);
​
                    content_container.hide();
                    dimmer.hide();
                });
            }
​
            // el.on('click', openEditor);
            el.bind('click', openEditor);
​
        }
    };
});
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers