帶ng-repeat格式的ngif

我使用ngRepeat指令來顯示人員的數據（現在我只顯示人員的名字）。帶ng-repeat格式的ngif

使用範圍標記顯示此人的姓名。此外還有一個按鈕，用於隱藏範圍並顯示一個輸入字段包含該人的姓名以便它可以編輯。

當我按下一個按鈕，我需要的影響跨度被「轉化」成輸入，但它不工作，所有的跨越轉換爲輸入。

<div ng-repeat="a_person in persons.data track by $index"> 

     <md-button aria-label="Show inputs"> 
      <md-icon ng-click="showInput(a_person)">edit</md-icon> 
     </md-button> 

     <span ng-if="!a_person.editMode">{{a_person.name}}</span> 
     <input ng-if= "a_person.editMode" type="text" value="{{a_person.name}}"> 

    </div>

我正在使用一張表格和一個表格，但我沒有在這裏顯示它們，所以它可以很容易解釋。

來源

2016-12-31 Roby Sottini

@KarthikVU將有什麼不同？ – charlietfl

顯示'showInput（）'的代碼並提供一個[mcve]在闖入者，codepen或任何其他沙盒 – charlietfl

你檢查了我的答案嗎？ –

您需要保留一個布爾值數組，以跟蹤顯示ng-repeat中每個項目的輸入字段或範圍。

$scope.showEdit = new Array(n) 

$scope.showInput(index) { 
    $scope.showEdit[index] = !$scope.showEdit[index]; 
}

最後

<span ng-if="!showEdit[$index]">{{a_person.name}}</span> 
<input ng-if= "!showEdit[$index]" type="text" value="{{a_person.name}}">

希望你的想法。

來源

2016-12-31 20:07:44 Rachmaninoff

這不應該是必要的，因爲OP保持每個人的編輯模式在這個人本身（這是一個更好的主意，BTW） –

<div ng-repeat="a_person in persons.data track by $index"> 

    <md-button aria-label="Show inputs"> 
     <!-- REPLACE 
     <md-icon ng-click="showInput(a_person)">edit</md-icon> 
     --> 
     <!-- WITH this --> 
     <md-icon ng-click="a_person.editMode = true">edit</md-icon> 
    </md-button> 

    <span ng-hide="a_person.editMode">{{a_person.name}}</span> 
    <!-- 
    <input ng-if="a_person.editMode" type="text" value="{{a_person.name}}"> 
    --> 
    <!-- USE ng-model directive --> 
    <input ng-show="a_person.editMode" type="text" ng-model="a_person.name"> 

</div>

我建議使用ng-show/ng-hide因爲ng-if指令創建一個子範圍將與ng-model指令，它預計，元件沒有打範圍。另外ng-if有更多的開銷，因爲它編譯/銷燬DOM，而另一個只改變CSS樣式。

來源

2017-01-01 00:57:25 georgeawg

試試這個它會工作能否按預期：

var myApp = angular.module('myApp',[]); 
 

 
myApp.controller('MyCtrl', function($scope) { 
 
    $scope.persons = { 
 
     "data": [ 
 
     { 
 
      id:1, 
 
      name:"name1" 
 
     }, 
 
     { 
 
      id:2, 
 
      name:"name2" 
 
     }, 
 
     { 
 
      id:3, 
 
      name:"name3" 
 
     } 
 
     ] 
 
    }; 
 
    
 
    $scope.showInput = function(personid) { 
 
     $scope.editperid = personid; 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
     <div ng-repeat="person in persons.data"> 
 
      <a ng-click="showInput(person.id)">edit</a> 
 
     <span ng-hide="editperid == person.id">{{person.name}}</span> 
 
     <input ng-show="editperid == person.id" type="text" value="{{person.name}}"> 
 
    </div> 
 
</div>

來源

2017-01-02 08:18:04

帶ng-repeat格式的ngif

回答

相關問題