AngularJs和Bootstrap按钮可提前设置值

时间:2018-07-30 14:30:50

标签: javascript html angularjs twitter-bootstrap

大家好,这是我关于堆栈溢出的第一个问题

我正在尝试制作我的应用程序,因此当我按下按钮时,将在预输入中键入一个值,有人可以这样做吗?

谢谢

1 个答案:

答案 0 :(得分:1)

使用ng-model只需单击按钮即可填充ng-click的值。

这里是一个例子:

var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myCtrl', function($scope) {
  $scope.data = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
  $scope.populate = function(index) {
    $scope.value = $scope.data[index || 0];
  }
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />

<body>
  <div ng-app="myApp" ng-controller="myCtrl">

    <input type="text" ng-model="value" uib-typeahead="val for val in data | filter:$viewValue | limitTo:5" class="form-control">
    <button ng-click="populate(0)" class="btn btn-info">Populate</button>

    <pre>Value: {{value | json}}</pre>

  </div>
</body>
</html>