2016-07-11 10 views
0

Ich habe eine sehr sehr einfache Anwendung, wo Sie Zeichenfolge Werte in zwei Eingabefelder eingeben und der Text in einem Satz platziert wird.Angular JS - Schalteingang Werte

Ich möchte eine Schaltfläche erstellen, die bei einem Klick mit den beiden Werten wechselt.

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

Also, wenn Sie auf eine Schaltfläche klicken 'oldurl' und 'newurl' Schalter.

Jede Hilfe würde sehr geschätzt werden.

Antwort

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

funktioniert perfekt! Ich danke dir sehr! –

1

Um das zu erreichen, was Sie wollen, Sie, natürlich, eine button erstellen müssen und ngClick Direktive verwenden, so können wir haben:

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

Nachdem Sie Ihre Funktion erstellen aufgerufen werden, dann nur Sie Ihre Variablen tauschen, gibt es viele Möglichkeiten, dies zu tun .. Sie etwas tun können:

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

oder mit ES6:

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

A Schnipsel Arbeits:

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>