Question

我有一个显示文字的div。在它下面有一个textarea，它可以编辑div的文本。在输入textarea的文本时，div文本会发生变化。我不希望这种情况发生。问题是div和文本区域都在ng-reapeat.Otherwise我会用两种不同的范围。

<div ng-repeat="item in list">
    <div>
      {{item.text}} // this is the text that is changing when typing in text area
    </div>
    <div>

      <textarea rows="4" cols="50" class="form-control" ng-model="item.text" required>{{item.text}}
       </textarea>

    </div>
  </div>

以下是我的问题的链接 http://codepen.io/ankitappuria27/pen/pyVzaj

Answer 1

如果您不想更改{{::item.text}}中的文字，只需使用一次性约束，例如：

textarea

注意：您在text遗产中所做的任何更改仍然会影响您的模型div值。这些更改在您的CREATE TABLE IF NOT EXISTS `a_loop` ( `id` int(11) NOT NULL DEFAULT '0', `num` varchar(50) NOT NULL DEFAULT '' ) ENGINE=InnoDB DEFAULT CHARSET=utf8; DELIMITER $$ CREATE PROCEDURE test_a_loop() BEGIN DECLARE x INT; DECLARE str VARCHAR(255); SET x = 0; SET str = ''; WHILE x < 5 DO SET x = x + 1; SET str = CONCAT('num-', x); INSERT INTO a_loop (id,num) VALUES (x, str); END WHILE; END$$ DELIMITER;中无法显示。

示例：

http://codepen.io/anon/pen/VaxGOp

<强>文档

https://docs.angularjs.org/guide/expression#one-time-binding

Answer 2

在您的JS文件中，您可以在json中添加元素以显示标题文本，如下所示：

  app.controller('ctrl', function($scope) {
  $scope.newitem = '';
  $scope.list = [
    {
      "order":1,
      "header":"Black", // header text
      "text":"Black"
    },
    {
      "order":2,
      "header":"Blue", // header text
      "text":"Blue"
    }
  ];

});

和你的绑定html应该如下

    <div>
      {{item.header}}
    </div>
    <div>

      <textarea rows="4" cols="50" class="form-control" ng-model="item.text" required>{{item.text}}
       </textarea>

    </div>

以ng-repeat结合

2 个答案: