Question

有没有办法只使用一个模型编辑三个不同的变量？因为在当前的方法中，看起来只是将变量值复制到＆＃34; editedVar＆＃34;。

<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

你可以通过多种方式实现这一目标，这是一种简单且更干燥的方式。

查看（只需简单地保留一个函数即可更改当前编辑的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

＆＃13;

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

＆＃13;

p {
  margin: 2px 0;
}

＆＃13;

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

＆＃13;

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

3 个答案: