AngularJS動態創建選擇框 - ngModel不註冊

Question

我正在使用一個選擇框來有條件地生成第二個選擇框。選擇框正確填充，Chrome Inspector中的所有元素都可以正常顯示。

問題是ng模型（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 
    } 
} 

Answer 1

我建議你使用 「選擇NG選項」 代替 「選項NG重複」 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/

我希望它能幫助。