AngularJS动态创建选择框 - ngModel未注册

时间:2016-03-28 14:51:24

标签: javascript angularjs

我正在使用一个选择框来有条件地生成第二个选择框。选择框正确填充,并且元素上的Chrome Inspector中的所有内容都可以正常显示。

问题是ng-model(ng-model =" commandName"在下面的代码示例中)没有正确注册正确的选择值。因此,如果您查看示例,最后的{{commandName}}输出正确输出第一个选择框,但是对于第二个选择框,没有输出任何内容。

这是一个错误吗?任何人都可以推荐一种替代方法来解决这个问题吗?

除了commandName在底部的p标签中没有输出任何内容,但commandType没有输出任何内容外,一切似乎都有效。

    <select ng-model="commandType" class="form-control" ng-init="commandType = ''; command = ''">
      <option value=""></option>
      <option ng-repeat="commandGroup in commandList" value="{{$index}}">{{commandGroup.name}}</option>
    </select>
    <!-- Shown if something is selected in the select box above -->
    <select ng-model="commandName" class="form-control" ng-if="commandType !== ''">
      <option value=""></option>
      <option ng-repeat="exactCommand in commandList[commandType].commands" value="{{$index}}">{{exactCommand.name}}</option>
    </select>
    <p>{{commandName}}</p>

AngularJS代码:

$scope.initCommandList = function () {
  $http({
    method: 'GET',
    url: $rootScope.webserver + 'admin/rterminalCommandList/',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
  }).success(function (data) {
    console.log("Command list");
    console.log(data.data);
    $scope.commandList = data.data;
  });
};
$scope.initCommandList();

和POST回复:

{
  "data"
:
  [{
    "id": 2,
    "name": "Application",
    "commands": [{
      "id": 3,
      "name": "Delete Smartcare data",
      "syntax": "su -c pm clear com.patasonic.android.smartcare",
      "comment": "Deletes Smartapp data"
    }]
  }, {
    "id": 1,
    "name": "Bluetooth",
    "commands": [{
      "id": 2,
      "name": "Bluetooth Controls. Turn off",
      "syntax": "bluetooth@ off",
      "comment": "Turns off device bluetooth"
    }, {"id": 1, "name": "Bluetooth Controls. Turn on", "syntax": "bluetooth@ on", "comment": "Turn on bluetooth"}]
  }], "header"
:
  {
    "messages"
  :
    [], "response_code"
  :
    200
  }
}

1 个答案:

答案 0 :(得分:0)

我建议您使用“select ng-options”而不是“option ng-repeat” https://docs.angularjs.org/api/ng/directive/ngOptions

<select ng-model="myModel"
ng-options="command as command.name for command in commandList">
</select>

这是一个带示例的jsfiddle:

http://jsfiddle.net/jcamelis/5y086ytr/4/

我希望它有所帮助。