我們是否可以動態創建一個簡單的跨度，只有當我們點擊跨度時才能使用ng-model功能輸入

只有當我們點擊span時，我們才能動態創建一個簡單的跨度來輸入ng-model功能。我們是否可以動態創建一個簡單的跨度，只有當我們點擊跨度時才能使用ng-model功能輸入

我已經通過了路，在那裏我創造既span和input和ng-hide隱藏input在加載和顯示只有當input用戶點擊跨度。但這裏的問題在於，我們直接將輸入與ng-model的值綁定，並在瀏覽器中導致緩慢和掛起問題，因爲我們有大量數據列表（我用1000個值進行了測試）。

請幫我解決這個問題，我想在加載時做所有隻讀數據，當用戶點擊span時，它應該動態地轉換到輸入框，當我們對它進行任何修改時，它應該保存在列表中。

Plunkr：http://plnkr.co/hwi1vXQxgaTSMzEdwcf7

HTML

<div ng-controller="myctrl"> 
    <div ng-repeat="value in list"> 
    <span ng-click="editThis()" tabindex="0">{{value}}</span> 
    </div> 
</div>

控制器

app.controller("myctrl", function($scope){ 
    $scope.list = [ 
    "sports", "coverage", "breaking", "news", "live", 
    "results", "and", "complete", "sport", "information:", 
    "football", "basket", "tennis" 
    ]; 
    $scope.editThis = function(){ 

    }; 
});

來源

2017-05-31 Praveen Rawat

看到這個[答案]（https://stackoverflow.com/a/18214735/3455035），但我認爲你有'span \ input'和使用'ng-if'交換的原始方法會更好，而不是創建自定義指令並在循環中運行它。嘗試通過ng-repeat中的'track by'或者避免'ng-if \ ng-show'中的函數來使應用程序更快 – anoop

開始，我的建議是爲了避免在同一時間上千項顯示，如果可能使用分頁（例如角度ui bootstrap分頁組件是真棒），就可以達到想要你想要的東西，如下列：

var app = angular.module('app', []); 
 
app.controller("myctrl", function($scope, $compile, $rootScope, $timeout){ 
 
    $scope.list = [ 
 
    "sports", "coverage", "breaking", "news", "live", 
 
    "results", "and", "complete", "sport", "information:", 
 
    "football", "basket", "tennis" 
 
    ]; 
 

 
    $scope.editThis = function($event, ind){ 
 
    angular.element($event.currentTarget).replaceWith($compile('<input type="text" ng-model="list['+ind+']" ng-blur="blurThis($event, '+ind+')">')($scope)); 
 
    }; 
 
    $scope.blurThis = function($event, ind){ 
 
    angular.element($event.currentTarget).replaceWith($compile('<span ng-click="editThis($event, '+ind+')" tabindex="0">{{list['+ind+']}}</span>')($scope)); 
 
    }; 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-app="app"> 
 
     <div ng-controller="myctrl"> 
 
      <div ng-repeat="value in list track by $index"> 
 
      <span ng-click="editThis($event, $index)" tabindex="0">{{value}}</span> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

請使用自定義的指令，以使事情變得更清晰，移動你的指令，這裏面的邏輯。然後在你的ng-repeat裏面會有你的指示。

我希望它有幫助。

來源

2017-05-31 19:08:59 quirimmo

我們是否可以動態創建一個簡單的跨度，只有當我們點擊跨度時才能使用ng-model功能輸入

回答

相關問題