如何保存ng-repeat中的元素？

Question

I am showing elements with ng-repeat and I want to select one of the elements then show the selected element in another div page or whatever.

    <div ng-show="newsignature" id="newsignature">
    <div class="ng-cloak">
    <div ng-click="showcreateform()" ng-hide="createsignature" class="ncontact" ng-repeat="template in signaturetemplates">
    <h2>{{template.name}}</h2>
    <div class="tdescrip" data-ng-bind-html="template.templatesample"></div>
    <br>
    </div>
  </div>
  </div>

The elements that I want to preserve are the name and the html but I don't know how to do it.

When i select on of the elements i show a form with an input fields, at the top of the form i have a preview button, the idea when i clicked is to show a preview of the template selected with the info given in the inputs. I can't get or preserve the template (is an HTML) in the first step to show in the preview.

<div ng-show="createsignature">
  <h2  ng-model="newSignature.name" placeholder="Name this Signature" contenteditable="true">Name this signature </h2>
 <span id="cancel" class="pull-right cancel cancels" ng-click="createsignature=false"><button>CANCEL</button></span>
 <span ng-click="showpreview(); createsignature=false; newsignature=false;"id="save" class="pull-right cancel" ><button>PREVIEW</button></span>
  <div class="pull-left">
      <span id="addsi" ng-click="createsignature=false;" class="pull-left"><img src="images/b-a-c-k-btn.png"><h2> New Signature</h2></span>
    </div>
    <table class="spacing-table table ">
    <tr>
        <td><input class="fill" ng-model="echo_Name" contentEditable="true" placeholder="Name"></input></td>
        <td></td>
        <td></td>
    </tr>
     <tr>
        <td><input class="fill" ng-model="echo_Title" contentEditable="true" placeholder="Title"></input></td>
        <td></td>
        <td></td>
    </tr>
     <tr>
        <td><input class="fill" ng-model="echo_Department" contentEditable="true" placeholder="Department"></input></td>
        <td></td>
        <td></td>
    </tr>
     <tr>
        <td><input class="fill" ng-model="echo_Company" contentEditable="true" placeholder="Company"></input>
        </td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td><input class="fill" ng-model="echo_Phone" contentEditable="true" placeholder="Mobile Number"></input>
        </td>
        <td></td>
         <td> <a href=""><img src="images/p-l-u-s-off-btn-copy.png"></a></td>
    </tr>
    <tr>    
         <td><input class="fill" ng-model="echo_Phone" contentEditable="true" placeholder="Office Number"></input></td>
        <td></td>
        <td> <a href=""><img src="images/p-l-u-s-off-btn-copy.png"></a></td>
    </tr>

    <tr>    
         <td><input class="fill" ng-model="echo_Phone" contentEditable="true" placeholder="Fax Number"></input></td>
        <td></td>
        <td> <a href=""><img src="images/p-l-u-s-off-btn-copy.png"></a></td>
    </tr>

    <tr>    
         <td><input class="fill" ng-model="echo_Email" contentEditable="true" placeholder="Email"></input></td>
        <td></td>
        <td> <a href=""><img src="images/p-l-u-s-off-btn-copy.png"></a></td>
    </tr>

    <tr>    
         <td><input class="fill" ng-model="echo_Website" contentEditable="true" placeholder="Website"></input></td>
        <td></td>
        <td> <a href=""><img src="images/p-l-u-s-off-btn-copy.png"></a></td>
    </tr>

    <tr>
        <td><input class="fill" ng-model="echo_Street" contentEditable="true" placeholder="Street Addres"></input></td>
        <td></td>
        <td></td>
    </tr>

     <tr>
        <td><input class="fill" ng-model="echo_Postal" contentEditable="true" placeholder="Postal Addres"></input></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td><input class="fill" ng-model="echo_Social"  contentEditable="true" placeholder="Social"></input></td>
        <td></td>
        <td></td>
    </tr>

  </table>
  </div>

Answer 1

If I understand you correctly you want to do something with one element after an event like a user click.

<div ng-repeat="template in signaturetemplates">
    <h2 ng-click="selectedTemplate=template">{{template.name}}</h2>
</div>

//Somewhere else in the code...
<div ng-show="selectedTemplate">
    <h2>Selected {{selectedTemplate.name}}</h2>
    <pre>{{selectedTemplate.templatesample}}</pre>
<div>

Answer 2

One way is to create a service which you can then access from other controllers, directives or whatever by simply injecting it.

First create the service which will hold the values:

core.service('shared', [function() {

  var myObj;

  return {
    setObj: function(value) {
      myObj = value;
    },
    getObj: function() {
      return myObj;
    }
  }
}]);

Then create your save function:

$scope.saveObj = function(myObj) {
  shared.setObj(myObj);
};

And apply it to a ng-click event:

Then you can use the getObj function to fetch the object from another controller for example:

core.controller('SomeOtherCtrl', ['shared', function(shared) {
  $scope.myObj = shared.getObj();
}]);

And use it in your template:

<div>{{myObj.name}}</div>

If you also want to preserve the HTML I'd suggest you create a directive for it which will render the necessary HTML which you can then add your $scope variable to.

core.directive('myDirective', [function() {
  return {
    restrict: 'A',
    scope: {
      myObj: '='
    },
    template: '<div>{{myObj.name}}</div>'
  }
}]);

Then use it like so:

<myDirective myObj="myObj"></myDirective>