Question

我有一个包含文本字段的表单，您可以在其中编写邮件，但我想为用户提供一组令牌以简化这些令牌的输入。
为此，我希望有一组按钮，当点击它们时，它们将相应的标记添加到消息中，所以如果我有：

<button>name</button>
<button>product_description</button>
<input ng-model = "message"></input>

在输入中如果我正在写“嗨”，然后点击“姓名”，输入就会变为“hi，{{name}}”，这样我就可以继续写“嗨，{{name}}，我们为您呈现“当我点击另一个按钮时，会发生完全相同的事情，但”product_description“就像：”嗨，{{name}}，我们会向您展示{{product_description}}“。这样，用户就可以写下他/她的信息，并用我的一套代币对其进行个性化，而无需他/她写下代币。

注意：

我想发送大括号供以后处理，按钮将添加到输入字段的文本中：'{{'+ button_val +'}}'

Answer 1

通过使用ng-click，您可以实现所需的功能。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ng-click-production</title>
  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="">
  <button ng-click="count = count + 1" ng-init="count=0">
  Increment
</button>
<span>
  count: {{count}}
</span>
</body>
</html>

<强> protractor.js

it('should check ng-click', function() {
  expect(element(by.binding('count')).getText()).toMatch('0');
  element(by.css('button')).click();
  expect(element(by.binding('count')).getText()).toMatch('1');
});

这是plunker

的链接

Answer 2

借助按钮标记的 ng-click 属性，您可以进行函数调用，将值附加到模型输入字段设置的值。

var app = angular.module('myModule', []);

app.controller('myController', ['$scope', function($scope) {

  $scope.input = '';
  $scope.name = '';

  $scope.addName = function(name) {
    $scope.name = ' user';
    $scope.input = $scope.input + $scope.name;
  }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myModule">
  <div ng-controller="myController">
    <input type="text" ng-model="input" />
    <button ng-click="addName()">User</button>
    <h1>{{input}}</h1>
  </div>
</div>

Angularjs有一个按钮，可以将文本添加到已经使用的输入文本字段中？

注意：

2 个答案: