3

Is there a way to edit three different variables using just one model? Because in the current approach it looks like just the variable value is being copied to the "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;    
    };
}
4

3 回答 3

3

您可以通过多种方式做到这一点,这是一种简单且更干的方式。

查看(让它们保持简单,只需一个函数来更改当前编辑的变量):-

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

}

小提琴

于 2015-01-05T03:23:23.793 回答
1

您想要的是非原始类型的引用的双向绑定,见下文:

<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;    
    };
}
于 2015-01-05T03:37:17.943 回答
1

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

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

于 2015-01-05T03:43:44.713 回答