javascript - Angular JS - 切换输入值

标签 javascript angularjs button

我有一个非常非常基本的应用程序,您可以在两个输入字段中输入字符串值,并将文本放置在句子内。

我想创建一个按钮,单击时可以切换两个值。

HTML

<body>
 <div ng-app="myApp" ng-controller="myCtrl">
    Old URL: <input type="text" ng-model="oldUrl"><br>
    New URL: <input type="text" ng-model="newUrl"><br>
    Prefix: <input type="text" ng-model="prefix"><br>
    <br>
    UPDATE {{ prefix }}_options SET option_value = replace(option_value, 'http://{{ oldUrl }}', 'http://{{ newUrl }}') WHERE option_name = 'home' OR option_name = 'siteurl';<br>

    UPDATE {{ prefix }}_posts SET guid = replace(guid, 'http://{{ oldUrl }}','http://{{ newUrl }}');<br>

    UPDATE {{ prefix }}_posts SET post_content = replace(post_content, 'http://{{ oldUrl }}', 'http://{{ newUrl }}');<br>

    UPDATE {{ prefix }}_postmeta SET meta_value = replace(meta_value,'http://{{ oldUrl }}','http://{{ newUrl }}');<br>
</div>
</body>

JAVASCRIPT( Angular )

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.oldUrl= "oldurl";
    $scope.newUrl= "newurl";
    $scope.prefix= "wp";
});

因此,当您单击按钮“oldurl”和“newurl”时,就会切换。

任何帮助将不胜感激。

最佳答案

要实现您想要的效果,您当然需要创建一个按钮并使用ngClick指令,所以我们可以有:

<button type="button" value="swap" ng-click="swap()">Swap</button>

之后,您创建要调用的函数,然后只需交换变量,有很多方法可以做到这一点..您可以这样做:

$scope.newUrl = [$scope.oldUrl, $scope.oldUrl = $scope.newUrl][0];

或者使用ES6:

[$scope.oldUrl, $scope.newUrl] = [$scope.newUrl, $scope.oldUrl];

一个正在运行的片段:

var app = angular.module('app', [])
  .controller('mainCtrl', function($scope) {

    $scope.oldUrl = "oldurl";
    $scope.newUrl = "newurl";
    $scope.prefix = "wp";
    $scope.swap = function() {
      $scope.newUrl = [$scope.oldUrl, $scope.oldUrl = $scope.newUrl][0];
    }
  });
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  Old URL:
  <input type="text" ng-model="oldUrl">
  <br> New URL:
  <input type="text" ng-model="newUrl">
  <br> Prefix:
  <input type="text" ng-model="prefix">
  <br>
  <button type="button" value="swap" ng-click="swap()">Swap</button>
  <hr>
  UPDATE {{ prefix }}_options SET option_value = replace(option_value, 'http://{{ oldUrl }}', 'http://{{ newUrl }}') WHERE option_name = 'home' OR option_name = 'siteurl';
  <br> UPDATE {{ prefix }}_posts SET guid = replace(guid, 'http://{{ oldUrl }}','http://{{ newUrl }}');
  <br> UPDATE {{ prefix }}_posts SET post_content = replace(post_content, 'http://{{ oldUrl }}', 'http://{{ newUrl }}');
  <br> UPDATE {{ prefix }}_postmeta SET meta_value = replace(meta_value,'http://{{ oldUrl }}','http://{{ newUrl }}');<br>
</body>

</html>

关于javascript - Angular JS - 切换输入值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38317201/

相关文章:

javascript - 当 Angular 具有 'finished' 时运行 JavaScript 函数

javascript - Angularjs:在匿名函数内的模块上注入(inject) Controller

javascript - 帮助您显示答案的按钮

javascript - 在 w3widgets 响应式日历上动态加载事件

javascript - 对象数组的 typescript 定义是什么?

javascript - Handsontable 数据到 sql 数据库

javascript - 如何根据表格是否有行动态隐藏按钮

javascript - echarts 格式工具提示舍入十进制数

javascript - 使用 AngularJS 绑定(bind)键、值结构列表中的数据

c# - 如何更改 Winforms 按钮上第二行文本的字体大小和颜色?