NG-模型中選擇不與工作納克提交

-3

HTML

<form ng-submit="fun()"> 
    <select ng-model="a" ng-options="table.id as table.name for table in tables></select> 
    <input type="text" ng-model="b">hello</input> 
    <input type="submit">Ok</input> 
</form>

$scope.tables = [{"id":1, "name":"x"},{"id":2, "name":"y"},{"id":3, "name":"z"}]; 
//This is dummy data, tables is actually coming from another custom API 
$scope.fun = function(){ 
    console.log($scope.a); 
    console.log($scope.b); 
}

這是輸出：

undefined 
hello

當我檢查源代碼時，選項將追加到我的選擇看起來像這樣：

<option label="x" value="undefined:undefined"></option>

我怎樣才能在ng-submit控制器中選擇選項？

來源

2017-04-05 Piyush Shrivastava

提供表DAT一個 – 2017-04-05 09:11:05

你不附加任何選擇選擇。 –

當您呈現HTML時，您可以在下拉列表中看到哪些選項？ – cezar

檢查這個....因爲你改變了你的數據我與

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
$scope.tables = [{"id":1, "name":"x"},{"id":2, "name":"y"},{"id":3, "name":"z"}]; 
 
$scope.fun = function(){ 
 
    console.log($scope.a); 
 
    console.log($scope.b); 
 
} 
 
});

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 

 
    <body ng-controller="MainCtrl"> 
 
    <p>Hello {{name}}!</p> 
 
    <form ng-submit="fun()"> 
 
    <select ng-model="a" ng-options="table.id as table.name for table in tables"></select> 
 
    <input type="text" ng-model="b"> 
 
    <input type="submit"> 
 
</form> 
 
    </body> 
 

 
</html>

來源

2017-04-05 09:15:53

在您的輸出選項的值字段中顯示：但我的選項如下所示： –

http://plnkr.co/edit/GCn12F4FC5IF3jI3WDm6?p=preview檢查這輛車，並與您的對比 – 2017-04-05 09:41:59

謝謝，發現bug –

更新，因爲你正在訪問的table.id和table.name的ng-options你需要改變你的數組對象像這樣的陣列

$scope.tables = [{"id":"1","name":"1"},{"id":"2","name":"2"},{"id":"3","name":"3"}];

angular.module("app",[]) 
 
.controller("ctrl",function($scope){ 
 

 
$scope.tables = [{"id":"1","name":"1"},{"id":"2","name":"2"},{"id":"3","name":"3"}]; 
 
$scope.fun = function(){ 
 
    console.log($scope.a); 
 
    console.log($scope.b); 
 
} 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
<form ng-submit="fun()"> 
 
    <select ng-model="a" ng-options="table.id as table.name for table in tables"></select> 
 
    <input type="text" ng-model="b" /> 
 
    <input type="submit"/>Ok 
 
</form> 
 
</div>

如果你不想改變數組，然後簡單地改變ng-options這個

ng-options="table as table for table in tables"

演示

angular.module("app",[]) 
 
.controller("ctrl",function($scope){ 
 

 
$scope.tables = ["1","2","3"]; 
 
$scope.fun = function(){ 
 
    console.log($scope.a); 
 
    console.log($scope.b); 
 
} 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
<form ng-submit="fun()"> 
 
    <select ng-model="a" ng-options="table as table for table in tables"></select> 
 
    <input type="text" ng-model="b" /> 
 
    <input type="submit"/>Ok 
 
</form> 
 
</div>

來源

2017-04-05 09:19:25

更改了陣列，仍然是打印undefined –

@Piyush Shrivastava你可以創建plnkr –

NG-模型中選擇不與工作納克提交

回答

相關問題