javascript - 如何使用 ng-model 绑定(bind)值

标签 javascript angularjs cordova ionic-framework

我正在开发一个应用程序,我遇到了类似的问题。我正在根据 API 响应动态创建选择框。我不明白如何在 Controller 中绑定(bind)这些值。引用代码为

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   // how to get values of input boxes here
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model= "What_Should_Go_Here" ng-repeat="x in [10,11,22,33]">
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
</select>
{{What_Should_Go_Here}}
</div>

最佳答案

初始化一个空对象selected = {}

然后,使用 ng-repeat 循环选择框,并在每个选择框中使用 ng-options 获取以下选项选择。

现在,对于每个选择中的每个选定值,ng-model="selected[y]" 使用 select 键将当前选择值推送到选定对象标签。

所以,选择所有选择后,所选对象看起来像这样,

{"1":11,"2":10,"3":22,"4":22}

请运行以下代码

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selected[y]" ng-options="x for x in data" ng-repeat="y in selects" ng-change="selectedFunc(y)">
</select>
<br><br>
Selected Values: {{selected}}
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.selected = {};
$scope.selects = [1,2,3,4]
$scope.data = [10,11,22,33]


$scope.selectedFunc = function(y)
{
 alert($scope.selected[y])
}

    
});
</script>


</body>
</html>

Here is a working DEMO

关于javascript - 如何使用 ng-model 绑定(bind)值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43111384/

相关文章:

javascript - 在 javascript 中拆分一个包含反引号字符串的字符串

javascript - 无法从选定的 jquery 中追加和更新选项

javascript - 重新加载 Express 应用程序不起作用(Angular 前端)

angularjs - 从 Electron 内部的angularJS SPA将电影上传到cloudinary

javascript - ChartJS x 轴仅显示一年中的月份

javascript - 更改所有嵌套对象的值 Immutable.js

javascript - 在javascript数组中查找和修改深度嵌套的对象

javascript - iFrame 中的 cordova 回调

javascript - 将代码改进为更干燥的方法?

cordova - 如何从 Cordova 休息调用中删除 Origin header ?