Question

我遇到涉及ng-switch和表单的问题。我需要你的帮助/建议，找到一个似乎是我的错误的解决方法。

我写了这个jsfiddle来举例说明会发生什么。如果您尝试更改任何输入控件的值，则只要键入单个字符就会失去焦点。尝试将字段中的值更改为“c＆＃39;”，例如，更改为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属性所指向的任何内容，则每次在某些输入上发生用户交互时，它似乎都会重新评估交换机范围。

这是一个有效的example（并且有点复杂），其中ng-switch不依赖任何东西＆＃34;可变的＆＃34;。

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

Answer 1

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

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

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

将ng-switch与输入混合会导致失去焦点

1 个答案: