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-模型中选择不与工作纳克提交

回答

相关问题