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

Question

有没有办法只用一个模型就能编辑三个不同的变量？因为在当前的方法中，看起来只有变量value被复制到"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

你可以用很多方法来做，这里有一种更简单，更干燥的方法。

视图(只是保持它们简单，只有一个函数来更改当前编辑的变量)：

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

}

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>

​