2016-07-11 7 views
0

2つの入力フィールドに文字列値を入力し、テキストを文の中に入れる非常に基本的なアプリケーションがあります。Angular JS - 入力値の切り替え

ボタンをクリックして2つの値を切り替えるとします。だから、

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(角)

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

ボタンをクリック 'oldurl' と 'NEWURL' スイッチ。

ご協力いただければ幸いです。あなたが望むものを達成するために

答えて

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

は完璧作品!どうもありがとうございます! –

1

、あなたは、もちろん、buttonを作成し、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>

関連する問題