0

我面临一个涉及ng-switch和形式的问题。我需要您的帮助/建议来为我认为是错误的问题找到解决方法。

我写了这个jsfiddle来举例说明会发生什么。如果您尝试更改任何输入控件的值，您会在键入单个字符后立即失去焦点。尝试将字段“c”中的值更改为 2013。

这是代码。

HTML

<div ng-app ng-controller="Ctrl">
  {{list}}
  <form>
    <ul>
      <li ng-repeat="(k,v) in list">
        <div ng-switch on="k"> 
          <span ng-switch-when="b">B:<input ng-model="list[k]"/></span>
          <span ng-switch-default>{{k}}:<input ng-model="list[k]"/></span>
        </div>
      </li>
    </ul>
  </form>
</div>

和控制器

function Ctrl($scope) {
    $scope.list = {
        a: 0,
        b: 1,
        c: 2
    };
}

有什么建议么？

在 sza 回答后编辑：

我真正的问题比上面的例子复杂得多。sza 的答案解决了上述问题，但是如果我们更改类似这样的代码，问题（部分）仍然存在

<div ng-app ng-controller="Ctrl">
  {{list}}
  <form>
    <ul>
      <li ng-repeat="item in list">
        <div ng-switch on="type_of(item.value)"> 
          <span ng-switch-when="object">B:do something later</span>
          <span ng-switch-default>{{item.key}}:<input ng-model="item.value"/>
          </span>
        </div>
      </li>
    </ul>
  </form>
</div>

和控制器

function Ctrl($scope) {
    $scope.list = [{
        key: 'a',
        value: 0
    }, {
        key: 'b',
        value: [{key:'ba', value: 10}, {key:'bb', value: 11}]
    }, {
        key: 'c',
        value: 2
    }];
    $scope.type_of = function(val){
        return typeof val;
    }
}

使用此代码，我在第一次输入后仍然失去焦点。奇怪的是，如果再次单击它，它会按预期工作。这是jsfiddler

再次编辑

好的，我想我理解 sza 指出的情况。如果 ng-switch 依赖于 ng-model 属性所指向的任何内容，它似乎每次在其中一些输入上发生用户交互时都会重新评估 switch 范围。

这是一个工作示例（并且稍微复杂一点），其中 ng-switch 不依赖于任何“可更改”的东西。

<script  type="text/ng-template" id="list.html">
  <div ng-switch on="item.type"> 
    <span ng-switch-when="object">
      <span ng-repeat="item in item.value" ng-include="'list.html'"></span>
    </span>
    <span ng-switch-default>{{item.key}}:<input ng-model="item.value"/>
    </span>
  </div>
</script>
<div ng-app ng-controller="Ctrl">
  {{list}}
  <form>
    <ul>
      <li ng-repeat="item in list" ng-include="'list.html'"></li>
    </ul>
  </form>
</div>

和控制器

function Ctrl($scope) {
    $scope.list = [{
        key: 'a',
        value: 0
    }, {
        key: 'b',
        type: 'object',
        value: [{key:'ba', value: 10}, {key:'bb', value: 11}]
    }, {
        key: 'c',
        value: 2
    }];
    $scope.type_of = function(val){
        return typeof val;
    }
}
4

1 回答 1

2

我能想出的另一种选择是将您的数据模型更改为像这样的键值对

function Ctrl($scope) {
    $scope.list = [{
        key: 'a',
        value: 0
    }, {
        key: 'b',
        value: 1
    }, {
        key: 'c',
        value: 2
    }];
}
<li ng-repeat="item in list">
    <div ng-switch on="item.key"> 
         <span ng-switch-when="b">B:<input ng-model="item.value"/></span>
         <span ng-switch-default>{{item.key}}:<input ng-model="item.value"/></span>
    </div>
</li>

Demo

您的方法的问题可能与模型 list[k] 的更改触发repeater刷新 DOM 有关，因为K或V将被重新评估。

于 2013-08-19T13:51:58.063 回答