Ng-Switch中断<select>默认/ Ng-Init值

时间:2018-02-01 10:48:17

标签: javascript html angularjs

我的问题是交换机打破了select的初始值。它会使select显示一个空白的初始选项 *注意:我在自己的程序中使用了更多的切换页面,我在这里删除它们以简化问题。我也必须使用开关,用路线替换它不是一种选择。 &lt;!DOCTYPE html&gt; &LT; HTML&GT; &LT; HEAD&GT; &LT; /头&GT; &lt; body ng-app&gt;     &lt; script src =&#34; https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"&gt;&lt; / script&gt;     &lt; div ng-switch =&#34; Page&#34; ng-init =&#34; Page = 4&#34;&gt;         &lt; div ng-switch-when =&#34; 4&#34;&gt;             &lt; select ng-model =&#34; City&#34; NG-INIT =&#34;市= 0&#34; NG-变化=&#34;市郊= 0&#34;&GT;                 &lt; option ng-value =&#34; 0&#34;禁用=&#34;禁用&#34;&GT; --- ---市&LT; /选项&GT;                 &lt; option&gt; City 1&lt; / option&gt;                 &lt; option&gt; City 2&lt; / option&gt;             &LT; /选择&GT;             &LT峰; br&GT;&LT峰; br&GT;             &lt; select ng-model =&#34; Suburb&#34; NG-INIT =&#34;市郊= 0&#34;&GT;                 &lt; option ng-value =&#34; 0&#34;禁用=&#34;禁用&#34;&GT; --- ---课程&LT; /选项&GT;                 &lt; option ng-show =&#34; City ==&#39; City 1&#39;&#34;&gt; City 1:Suburb 1&lt; / option&gt;                 &lt; option ng-show =&#34; City ==&#39; City 1&#39;&#34;&gt; City 1:Suburb 2&lt; / option&gt;                 &lt; option ng-show =&#34; City ==&#39; City 2&#39;&#34;&gt; City 2:Suburb 1&lt; / option&gt;                 &lt; option ng-show =&#34; City ==&#39; City 2&#39;&#34;&gt; City 2:Suburb 2&lt; / option&gt;             &LT; /选择&GT;         &LT; / DIV&GT;     &LT; / DIV&GT; &LT; /体&GT; &LT; / HTML&GT;

2 个答案:

答案 0 :(得分:2)

我已编辑了您的代码,如下所示。

需要注意的几点:

  1. 永远不要使用ng-init,因为这不是一个好习惯,不强烈推荐。
  2.   

    ngInit的唯一合适用途是用于别名ngRepeat的特殊属性。除了这种情况,您应该使用控制器而不是ngInit来初始化范围

    上的值
    1. 您的选项显示为空白,因为ng-switch会创建自己的子范围。因此,您的模型没有直接绑定到控制器。您可以绑定模型或使用控制器作为语法,如下所示。作为语法的控制器隐含地处理DOT规则。有关详细参考,请参阅JavaScript Prototypal Inheritance
    2. angular.module("MyApp", []).controller("MyCtrl", function() {
          var vm = this;
          vm.cities = [{
              'name': 'City 1',
              'value': 1
          }, {
              'name': 'City 2',
              'value': 2
          }];
          vm.createSurburbArray = function() {
              vm.suburbs = [{
                  'name': vm.City + ': Suburb 1',
                  'value': 1
              }, {
                  'name': vm.City + ': Suburb 2',
                  'value': 2
              }];
          }
      
          //init
          function init() {
              vm.Page = 4;
          };
          init();
      });
      <!DOCTYPE html>
      <html>
      <head>
      </head>
      
      <body ng-app="MyApp" ng-controller="MyCtrl as vm">
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
      
          <div ng-switch="vm.Page">
              <div ng-switch-when="4">
                  <select ng-model="vm.City" ng-options="city.name as city.name for city in vm.cities" ng-change="vm.createSurburbArray()">
                      <option value="" disabled="disabled">---City---</option>
                  </select>
                  <br><br>{{vm.City}}{{vm.Suburb}}
                  <select ng-model="vm.Suburb" ng-options="suburb.name as suburb.name for suburb in vm.suburbs">
                      <option value="" disabled="disabled">---Course---</option>
                  </select>
              </div>
          </div>
      </body>
      
      </html>

答案 1 :(得分:1)

VIVZ对此线索有更好的回答

然而,这是一个更简单的版本,如何从提问者的代码中修复/理解问题。

1:将“ng-value”更改为“value”

2:将default-option和init值更改为“”(而不是“0”)

<!DOCTYPE html>
<html>
<head>
</head>
<body ng-app>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>

    <div ng-switch="Page" ng-init="Page = 4">
        <div ng-switch-when="4">
            <select ng-model="City" ng-init="City=''" ng-change="Suburb=''">
                <option value="" disabled="disabled">---City---</option>
                <option>City 1</option>
                <option>City 2</option>
            </select>
            <br><br>
            <select ng-model="Suburb" ng-init="Suburb=''">
                <option value="" disabled="disabled">---Course---</option>
                <option ng-show="City == 'City 1'">City 1: Suburb 1</option>
                <option ng-show="City == 'City 1'">City 1: Suburb 2</option>
                <option ng-show="City == 'City 2'">City 2: Suburb 1</option>
                <option ng-show="City == 'City 2'">City 2: Suburb 2</option>
            </select>
            {{City}}
        </div>
    </div>
</body>
</html>