如何加載菜單，當我們點擊一​​個項目在角js

Question

我創建了一個視圖，它顯示有關客戶端的地址信息。當我點擊編輯聯繫人時，應該出現新的視圖。怎麼做？ 這是我的代碼。

<div ng-show="addressBook">  
    <div ng-repeat="names in addressBookNames()">  
     <div ng-show="addressId === names.idNo"> 
      <div class="inboxTabs"> 
      <div class="basicTab appFont" ng-click="edit=== true">Edit Contact</div> 
      <div class="basicTab appFont"> Delete Contact</div>   
      </div> 
      <h3> <center>{{names.firstName}},{{names.lastName}} </center></h3> 
      <table style="width:60%"> 
        <tr> 
         <th>Organization</th> 
         <th>Role/Specialty</th> 
         <th>ID</th> 
        </tr> 
        <tr> 
         <td>{{names.organization}}</td> 
         <td>{{names.roleSpecialty}}</td> 
         <td>{{names.id}}</td> 
        </tr> 
        <tr> 
         <th>License/Certificates</th> 
         <th>Affiliations</th> 
         <th>Insurance Accepted</th> 
        </tr> 
        <tr> 
         <td>{{names.licenses}}</td> 
         <td>{{names.Affiliations}}</td> 
         <td>{{names.InsuranceAccepteds}}</td> 
        </tr> 
      </table> 
</div> 
</div> 

這裏，當我點擊編輯聯繫人時，另一個視圖應該顯示在地址詳細信息顯示的同一個地方。

Answer 1

如果我理解正確的話，應該ng-if是你的朋友

與

基本上NG-如果你可以在依賴於某些變量渲染視圖的一部分。

爲了在你的控制器實例：

angular.module('myModule', []) 
.controller('myController', function() { 
    $scope.edit = false; 

    /* 
    * set edit to true if its false 
    * set edit to false if its true 
    */ 
    var setEditable = function() { 
     if ($scope.edit === false) { 
      $scope.edit = true; 
      // possible place for saving actions 
     } else { 
      $scope.edit = false; 
     } 
    } 
}); 

在你看來

：

<div ng-controller="myController"> 
    <div ng-if="edit"> 
    I Am only shown if edit === true; 
    </div> 
    <div ng-if="!edit"> 
    I Am only shown if edit === false; 
    </div> 
</div> 

，或者您可以使用ng-show和ng-hide但我會建議的ng-if用法：

<div ng-controller="myController"> 
    <div ng-show="edit"> 
     I Am only shown if edit === true; 
    </div> 
    <div ng-hide="edit"> 
     I Am only shown if edit === false; 
    </div> 
</div> 

Answer 2

你可以在ng-click中創建一個函數每ü執行該功能的時間u能推新對象到任何u的陣列NG-重複

<div class="basicTab appFont" ng-click="NewForm()">Edit Contact</div> 

內部控制器

$scope.NewForm = function(){ 
$scope.TestArray.push({ //array 
    firstName:'', 
    lastName:'', 
    organization:'', 
    roleSpecialty:'', 
    id:''  // likewise add the rest of the elements 
}) 
}