단일 모델을 사용하여 여러 변수 편집

Question

한 모델을 사용하여 세 가지 변수를 편집하는 방법이 있습니까? 현재 접근법에서는 변수 값이 "editedVar"에 복사되는 것처럼 보입니다.

Fiddle of the code below

<div ng-controller="MyCtrl"> 
    A: {{A}}<br/> B: {{B}} <br/> C: {{C}}<br/> 
    <input ng-model="editedVar"/> 
    <br/> 
    <button ng-click="switchToA()">Switch to A</button> 
    <button ng-click="switchToB()">Switch to B</button> 
    <button ng-click="switchToC()">Switch to C</button> 
</div> 




var myApp = angular.module('myApp',[]); 

function MyCtrl($scope) { 
$scope.A = 1; 
$scope.B = 2; 
$scope.C = 3; 

    $scope.switchToA = function() 
    { 
     $scope.editedVar = $scope.A;  
    }; 

    $scope.switchToB = function() 
    { 
     $scope.editedVar = $scope.B;  
    }; 

    $scope.switchToC = function() 
    { 
     $scope.editedVar = $scope.C;  
    }; 
} 

Answer 1

당신은 여러 가지 방법으로 그것을 할 수 여기에 간단하고 더 Dry'ier의 방법입니다.

보기 (그냥 현재 편집 VAR를 변경하는 간단한 하나의 기능을 유지) : -

<input ng-model="editedVar[editing]" /> 
<br /> 
<button ng-click="switchTo('A')">Switch to A</button> 
<button ng-click="switchTo('B')">Switch to B</button> 
<button ng-click="switchTo('C')">Switch to C</button> 

컨트롤러 : - 당신도 할 수

function MyCtrl($scope) { 
    /*Keep the values in an object with respective property name*/ 
    $scope.editedVar = { 
     A: 1, 
     B: 2, 
     C: 3 
    } 

    /*Set the default edit property*/ 
    $scope.editing = 'A'; 

    /*Sets the currently edited property based on what is being passed in*/  
    $scope.switchTo = function (prop) { 
     $scope.editing = prop; 
    }; 

} 

Fiddle

개체를 사용하지 않고도 유지 관리 코드 만 있으면됩니다.

보기 : -

<input ng-model="editedVar" ng-change="valueChange()"/> 
<br/> 
<button ng-click="switchTo('A')">Switch to A</button> 
<button ng-click="switchTo('B')">Switch to B</button> 
<button ng-click="switchTo('C')">Switch to C</button> 

컨트롤러 : - 당신이 원하는 것은하지 원시 형에 의해 참조 결합 양방향이

function MyCtrl($scope) { 

    $scope.A = 1; 
    $scope.B = 2; 
    $scope.C = 3; 

    var editing; 
    /*Change event to keep the value in sync*/ 
    $scope.valueChange = function(){ 
     $scope[editing] = $scope.editedVar; 
    } 
    /*Just one function*/ 
    $scope.switchTo = function (prop) { 
     $scope.editedVar = $scope[editing = prop]; 
    }; 

} 

Fiddle

Answer 2

, 아래 참조 :

<div ng-controller="MyCtrl"> 
    A: {{A.val}}<br/> B: {{B.val}} <br/> C: {{C.val}}<br/> 
    <input ng-model="editedVar.val"/> 
    <br/> 
    <button ng-click="switchToA()">Swithc to A</button> 
    <button ng-click="switchToB()">Swithc to B</button> 
    <button ng-click="switchToC()">Swithc to C</button> 
</div> 



var myApp = angular.module('myApp',[]); 

function MyCtrl($scope) { 
    $scope.A = {val: 1}; 
    $scope.B = {val: 2}; 
    $scope.C = {val: 3}; 

    $scope.switchToA = function() 
    { 
     $scope.editedVar = $scope.A;  
    }; 

    $scope.switchToB = function() 
    { 
     $scope.editedVar = $scope.B;  
    }; 

    $scope.switchToC = function() 
    { 
     $scope.editedVar = $scope.C;  
    }; 
} 

Answer 3

@ PSL의 대답의 한 가지 한계는 다른 코드가 A, B 또는 C의 값을 범위에서 변경하면 $scope.editedVar이 올바르게 업데이트되지 않는다는 것입니다. 대신 다음 두 가지 방법을 사용하여 두 개의 시계를 사용하여 올바른 범위 속성이 입력에서 editedVar을 사용하여 변경했거나 다른 코드를 통해 변경했는지 여부를 최신으로 유지합니다.

Forked jsFiddle

var myApp = angular.module('myApp', []); 
 

 
myApp.controller('MyCtrl', function MyCtrl($scope) { 
 
    $scope.A = 1; 
 
    $scope.B = 2; 
 
    $scope.C = 3; 
 

 
    var propToEdit, 
 
    deregPrevWatch; 
 

 
    $scope.switchTo = function(prop) { 
 
    propToEdit = prop; 
 
    // set up a watch on this property so if anything else updates it 
 
    // editedVar gets correctly updated. 
 
    // Make sure to deregister the previous watch first. 
 
    if (deregPrevWatch) 
 
     deregPrevWatch(); 
 
    deregPrevWatch = $scope.$watch(prop, function(val) { 
 
     $scope.editedVar = val; 
 
    }); 
 
    }; 
 

 
    $scope.$watch('editedVar', function(newVal, oldVal) { 
 
    // skip the initialisation step 
 
    if (newVal !== oldVal) 
 
     $scope[propToEdit] = newVal; 
 
    }); 
 

 
    // start off pointing at A 
 
    $scope.switchTo('A'); 
 
});

p { 
 
    margin: 2px 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js"></script> 
 

 
<div ng-app="myApp"> 
 
    <div ng-controller="MyCtrl"> 
 
    <p>A: {{A}}</p> 
 
    <p>B: {{B}}</p> 
 
    <p>C: {{C}}</p> 
 
    <input ng-model="editedVar" /> 
 
    <p> 
 
     <button ng-click="switchTo('A')">Switch to A</button> 
 
     <button ng-click="switchTo('B')">Switch to B</button> 
 
     <button ng-click="switchTo('C')">Switch to C</button> 
 
     <button ng-click="A = 5">Set A to 5</button> 
 
    </p> 
 
    </div> 
 
</div>