Question

I have a very very basic application where you enter string values into two input fields and the text is placed inside a sentence.

I would like to create a button that when clicked with switch the two values.

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

So when you click a button 'oldurl' and 'newurl' switch.

Any help would be greatly appreciated.

Answer 1

To achieve what you want, you, of course, need to create a button and use ngClick directive, so we can have:

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

After it you create your function to be called, then you just swap your variables, there are a lot of ways to do this.. you can do something like this:

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

or with ES6:

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

A snippet working:

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>

Answer 2

$scope.swapUrls = function () {
   var oldUrl = angular.copy($scope.oldUrl);
   $scope.oldUrl = angular.copy($scope.newUrl);
   $scope.newUrl = oldUrl;
}

Angular JS - switching input values

2 个答案: