Question

我们是否可以动态创建一个简单的范围，仅在我们点击ng-model时使用span功能输入。

我已经完成了这个过程，我在span和input创建了input并隐藏ng-hide加载input并且仅显示<div ng-controller="myctrl"> <div ng-repeat="value in list"> <span ng-click="editThis()" tabindex="0">{{value}}</span> </div> </div>当用户点击跨度时。但这里的问题是我们是通过ng-model直接绑定输入值，它导致浏览器中的缓慢和悬挂问题，我们有大量的数据列表（我已经测试了1000个值）。

请帮我这个，我想在加载时制作所有只读数据，当用户点击跨度然后它应该动态转换到输入框，当我们对它进行任何更改然后它应该保存在列表中。

Plunkr：http://plnkr.co/hwi1vXQxgaTSMzEdwcf7

HTML

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

  };
});

CONTROLLER

{{1}}

Answer 1

开始我的建议是避免同时显示数千个项目，如果可能的话使用分页（例如angular ui bootstrap分页组件很棒），你可以用以下内容实现你想要的东西： / p>

＆＃13;

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));
  };
});

＆＃13;

<!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>

＆＃13;

请使用自定义指令以使事情更清晰，并在指令中移动此逻辑。然后在你的ng-repeat里面会有你的指令。

我希望它有所帮助。

只有当我们点击跨度时，我们才能动态创建一个简单的跨度来输入ng-model特征

1 个答案: