使用单个模型编辑多个变量

你可以用很多方式做到这一点，这里有一个简单且更干燥的方法。

视图（只需保持简单，只需一个函数即可更改当前编辑的变量）：-

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

小提琴

您也可以这样做，但只能在不使用对象的情况下使用更多的维护代码。

视图：-

<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];
    };
}

小提琴

你想要的是通过非基元类型对引用进行双向绑定，请参见下文：

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

@PSL答案的一个限制是，如果其他代码更改了作用域上A、B或C的值，则$scope.editedVar不会正确更新。相反，以下替代方法使用两个监视来确保正确的 scope 属性保持最新，无论是因为您在输入中使用editedVar还是通过其他代码更改了它。

分叉的 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>