Question

我有一个ng-repeat中的对象列表，当我点击一个特定的项目时，我想将点击的对象传递给另一个页面，并在新的html页面中显示对象的属性。

    <div ng-include="'src/private/jobseekerHeader/jobseekerHeader.html'"></div> 

<section style="margin-top:100px">

        <div class="bg-overlay1">
    <div class="row text-center">

        <br><br>
        <h4 style="color: white">Build Your Career</h4>
    </div>
</div>

    </section> 

   <br>

 <section>

<div class="container"></div>

  <div class="col-md-5 col-md-offset-1">
  <br>
  <br>
  <h4 style="color: #2b85d4;
    text-align: center;
    margin-top: -41px;
    font-size: 25px;">Recommended Jobs</h4>


</div>
</section> 


 <section>
<div class="container">

<div class="col-xs-8 col-xs-offset-3">

<div class="form-group">

<input type="text" ng-model="search" class="form-control" placeholder="Search">

</div>

    <div ng-repeat="myprofile in viewjobCtrl.profile | filter:search" >
           <div class="row" style="border: 1px solid #adb5bc66;
border-radius: 7px;
background: #7080901a;">
                <div class=col-xs-12>
                <div class="col-xs-3">

                <h5>Company</h5>
                </div>
                <div class="col-xs-3">
                <h5>:</h5>
                </div>
                <div class="col-xs-4">
                <h5>{{myprofile.companyName}}</h5>
                </div>
                </div>

                <div class=col-xs-12>
                <div class="col-xs-3">
                <h5>Title</h5>
                </div>
                <div class="col-xs-3">
                <h5>:</h5>
                </div>
                <div class="col-xs-4">
                <h5>{{myprofile.jobTitle}}(Exp-{{myprofile.experience}})</h5>
                </div>
                </div>
                <div class=col-xs-12>
                <div class="col-xs-3">
                <h5>Description:</h5>
                </div>
                <div class="col-xs-3">
                <h5>:</h5>
                </div>
                <div class="col-xs-6">
                <h5>{{myprofile.description}}</h5>
                </div>
                </div>
                <div class=col-xs-12>
                <div class="col-xs-3">
                <h5>Package</h5>
                </div>
                <div class="col-xs-3">
                <h5>:</h5>
                </div>
                <div class="col-xs-4">
                <h5>{{myprofile.package}}</h5><br/>

                 <h4><a ui-sref="applyJobs" style="background: black;
color: white;
padding: 4px 8px 5px 7px;">Apply</a></h4> 

 <!-- <a ng-href="/apply-jobs/{{myprofile.package}}{{myprofile.companyName}}
 {{myprofile.jobTitle}}(Exp-{{myprofile.experience}}){{myprofile.description}}">Apply</a> 
 -->
                </div>
                </div>

                    </div>
                    <hr>
                   </div>   
</div>
</div>




</section>

<div ng-include="'src/public/indexFooter/indexFooter.html'"></div>

检查代码一次，以便您可以清楚地理解，我正在使用ngrepeat从后端获取代码，并且我想在单击应用按钮时在下一个html页面中显示特定数据

Answer 1

使用ui-router for angularjs，然后在ng-click上将单击的对象传递给下一个状态。

e.g。

$state.go("statename", {data to pass});

将上面的代码包装在一个函数中，你将拥有你需要的东西。

Answer 2

此代码可以帮助您

   <div ng-include="'src/private/jobseekerHeader/jobseekerHeader.html'"></div> 

     <section style="margin-top:100px">
        <div class="bg-overlay1">
    <div class="row text-center">
        <br><br>
        <h4 style="color: white">Build Your Career</h4>
    </div>
    </div>
    </section> 

    <br>

    <section>

    <div class="container"></div>

    <div class="col-md-5 col-md-offset-1">
   <br>
  <br>
  <h4 style="color: #2b85d4;
    text-align: center;
    margin-top: -41px;
    font-size: 25px;">Recommended Jobs</h4>


</div>
</section> 


 <section>
<div class="container">

<div class="col-xs-8 col-xs-offset-3">

<div class="form-group">

<input type="text" ng-model="search" class="form-control" placeholder="Search">

</div>

    <div ng-repeat="myprofile in viewjobCtrl.profile | filter:search" >
           <div class="row" style="border: 1px solid #adb5bc66;
border-radius: 7px;
background: #7080901a;">
                <div class=col-xs-12>
                <div class="col-xs-3">

                <h5>Company</h5>
                </div>
                <div class="col-xs-3">
                <h5>:</h5>
                </div>
                <div class="col-xs-4">
                <h5>{{myprofile.companyName}}</h5>
                </div>
                </div>

                <div class=col-xs-12>
                <div class="col-xs-3">
                <h5>Title</h5>
                </div>
                <div class="col-xs-3">
                <h5>:</h5>
                </div>
                <div class="col-xs-4">
                <h5>{{myprofile.jobTitle}}(Exp-{{myprofile.experience}})</h5>
                </div>
                </div>
                <div class=col-xs-12>
                <div class="col-xs-3">
                <h5>Description:</h5>
                </div>
                <div class="col-xs-3">
                <h5>:</h5>
                </div>
                <div class="col-xs-6">
                <h5>{{myprofile.description}}</h5>
                </div>
                </div>
                <div class=col-xs-12>
                <div class="col-xs-3">
                <h5>Package</h5>
                </div>
                <div class="col-xs-3">
                <h5>:</h5>
                </div>
                <div class="col-xs-4">
                <h5>{{myprofile.package}}</h5><br/>

                 <h4 ng-click="callFromJS(myprofile)">Apply</h4> 

 <!-- <a ng-href="/apply-jobs/{{myprofile.package}}{{myprofile.companyName}}
 {{myprofile.jobTitle}}(Exp-{{myprofile.experience}}){{myprofile.description}}">Apply</a> 
 -->
                </div>
                </div>

                    </div>
                    <hr>
                   </div>   
</div>
</div>




</section>

<div ng-include="'src/public/indexFooter/indexFooter.html'"></div>

控制器：

$scope.callFromJS = function(myprofile){
    $state.go("applyJobs", {data : myprofile}); 
}

在点击时将ng重复特定对象传递给新的html页面

2 个答案: