我试图简单地从下拉列表中获取先前的值和新选择的值.在此示例中,下拉列表预先填充了分配用户的当前组.
当下拉列表更改时,我希望能够返回旧值和新值.我已经可以获得旧值,但我不知道如何返回新值.
控制器代码:
// User Object
userAccess = [{"user_name":"dodsosr11",
"group_level":1,
"user_id":500,
"group_id":10,
"group_name":"Conferences_Admins"},
{"user_name":"keatikj09",
"group_level":1,
"user_id":250,
"group_id":10,
"group_name":"Conferences_Admins"},
{"user_name":"malinag10",
"group_level":1,
"user_id":492,
"group_id":10,
"group_name":"Conferences_Admins"}];
//Group Object
groupAccess = [{"group_name":"Conferences_Admins",
"id":10,
"level_id":1},
{"group_name":"ticket_sales",
"id":59,
"level_id":3},
{"group_name":"Web Developers",
"id":1,
"level_id":1}];
$scope.reassignUser = function(){
var oldGroup = this.user.group_id;
var newGroup = ?????
};
HTML:
<tr ng-repeat="user in userAccess">
<td>{{ user.user_name}}</td>
<td>
<select ng-change="reassignUser()"
ng-model="user.group_name"
ng-options="g.group_name as g.group_name for g in groupAccess">
</select>
</td>
</tr>
我在这里使用下面第一个响应中提供的手表示例创建了一个小提琴. http://jsfiddle.net/LHz9D/1/
我正在使用ng-options在我的角度应用程序中打印表单的所有选项.我直接从我的数据库中获取了值,这给了我一个国家列表:
<select ng-options="country.country for country in countries" ng-model="selectedCountry" ng-change="updateSelectedCountry(selectedCountry)" class="form-control">
这里加载页面时,选择不会显示任何内容,即没有占位符,而我想打印一个静态值,如"任何地方",而不必将其添加到我的"国家/地区"列表中.
我试过这个:
<select ng-options="country.country for country in countries" ng-model="selectedCountry" ng-change="updateSelectedCountry(selectedCountry)" class="form-control">
<option>Anywhere</option>
</select>
但它不起作用
有谁知道如何解决这个问题？
谢谢
我创造了js小提琴:小提琴
我创建了一个包含一些ng-options的表单,当你使用按钮而不是鼠标时它会有奇怪的行为(只需单击文本框并按"tab",你就可以使用箭头键选择它).
<form ng-controller="MyApp" id="Apps" name="Apps" ng-submit="SendApp()" role="form" novalidate>
<input type="text" name="title" ng-model="Info.Title" />
<select id="Formula" ng-model ="Info.Genre" ng-change= "ChangeGenre()"
ng-options="id as name for (id, name) in Genre" blank></select>
<select class="form-control" ng-model ="Info.Program"
ng-options="Program as Name for (Program, Name) in Program" ng-change="ChangeProgram()" blank></select>
<h3>{{Info.Genre}}</h3>
<h3>{{Info.Program}}</h3>
<button type=submit>Submit this </button>
</form>
使用Javascript:
var theApp = angular.module("TheApp", []);
theApp.controller("MyApp", ['$scope', function($scope){
$scope.Program = {"1":"Music","2":"Theater","3":"Comedy"};
$scope.Genre = {"1":"Mystery", "2":"Thriller", "3":"Romance"};
$scope.ChangeProgram = function(){
alert($scope.Info.Program + " " + $scope.Info.Genre);
}
$scope.ChangeGenre = …如何使用ng-options设置默认选项？
我在控制器中设置了它(使用控制器作为语法):
this.myOption = this.myOptions[0];
但是,这仍然是一个空白的默认选项:
<option value="?" selected="selected"></option>
如何将默认选项设置为模型中的第一个值("项1")？
我在我的资源对象中有一个方法:
resources.type
otherstuff: 'more strings'
type:'specifictype'
morestuff: 'morestuff'
用户可以通过下拉列表/通过另一个调用来更改此类型,该调用获取所有可能类型的列表,这些类型看起来像resourceList.types,其中包含像json这样的对象列表
types:
[
{name:'resourcetype1'},
{name:'resourcetype2'},
etc...
],
我的HTML看起来像:
<select ng-model="resources.type" ng-options="name.name for name in resourceList.types">
</select>
选择/下拉框填充了我的resourceList.type内容,但是当页面加载时,ng-model没有设置为已选择的资源类型.实际上,当您单击时,它会在下拉列表的顶部选择一个空白条目.这个角度有点挑剔吗？如何让ng-model以我想要的方式运行？
我尝试使用不同的方法来获取重复,但我觉得这更像是角度连接模型的方式.它是否只是将字符串与ng-options列表匹配？
这是plnkr,因为你可以看到它不是默认为type1
我正在使用ng-options生成一个选项为位置的选择标记.标签是位置名称,值是位置ID(在数据库中).
我已将值(位置ID)绑定到ng-model属性,但我还想将标签(位置名称)绑定到不同的ng-model属性.(我需要将id字段分开,因为这将被发布到需要此特定属性的服务器.)在Angular中执行此操作的最佳方法是什么？
我的代码:
<div ng-app="app"><div ng-controller="edit">
<select ng-model="purchase.pickUpLocationId" ng-options="loc.id as loc.name for loc in purchase.availableLocations"></select>
<!-- This is the model not yet bound: -->
<p>You have selected {{ purchase.pickUpLocationName }}</p>
</div></div>
var app = angular.module('app', []);
app.controller('edit', ['$scope', function($scope) {
$scope.purchase = {
pickUpLocationId: 30,
availableLocations: [
{id: 20, name: "Charleston, SC"},
{id: 30, name: "Atlanta, GA"},
{id: 40, name: "Richmond, VA"},
]
};
}]);
我从1.2.14迁移到1.4.8时遇到了这种情况.这在1.2.14中工作正常,但我在1.4.8中获得了无限的$ digest()循环.这是一个小提琴,展示了这个问题.小提琴比这篇文章更容易看,但是SO让我包括代码
我有一个select看起来像这样的元素:
<select ng-model="selectedId" ng-options="opt.id as opt.label for opt in getOptions()">
我的选项是对象,如下所示:
$scope.options = [ { id: 1, label: 'one' }, { id: 2, label: 'two' } ];
我想给出ngOptions指令的选项数组取决于条件; 有时我只是想给它$scope.options,但有时我想包括另一个选项.
$scope.getOptions = function() {
if ($scope.showThirdOption)
return [{ id: 3, label: 'three' }].concat($scope.options);
else
return $scope.options;
};
现在,如果我以编程方式将我的模型设置为3:
...
$scope.selectedId = 3;
...
......即使该选项不存在,Angular也不会感到沮丧.它只是<option>向<select>元素添加一个节点:<option value="?" selected="selected"></option>下拉列表中的选定值显示为空白.
但是,如果我然后设置我的状态st我的getOptions()返回另外的选项:
...
$scope.selectedId = 3;
$scope.showThirdOption = …我有这个结构:
model = [
{
name: 'name1',
items: [
{
name: 'subobj1'
},
{
name: 'subobj2'
}]
},
{
name: 'name2',
items: [
{
name: 'subobj1'
},
{
name: 'subobj2'
}]
},
....
]
问题是:如何编写ngOptions attrbiute来输出这个对象？:
<select>
<optgroup label="name1">
<label>subobj1</label>
<label>subobj2></label>
</optgroup>
....
</group>
此外 - ngRepeat不是一个选项.我必须单独使用ngOptions才能使用插件.
我的指令用法代码
<input-select ng-model="someModel" ng-change="someFunction()"
options="countries"></input-select>
我的指令代码
.directive('inputSelect', function () {
return {
templateUrl: 'someTemplate.html',
restrict: 'E',
scope: {
ngModel: '=',
ngChange: '='
}
};
});
我的指令模板
<select
ng-model="ngModel" ng-init="ngModel "
ng-options="option[optionId] as option[optionName] for option in options"
ng-change="ngChange">
</select>
因此,当所选项被更改时,函数someFunction()将被无限次调用(尽管更改已完成一次),应该更改的内容以确保someFunction()只调用一次(someFunction()是控制器范围内的函数)该指令正在使用中)
[我确实尝试使用&和使用@ngChange的范围类型,somefunction()如果使用它们不会被解雇.]
javascript angularjs angularjs-directive angularjs-scope ng-options
我有2个select语句,第一个选择由我的第一个webservice请求填充.用户在第一个选择中选择所需的数据,其中将触发onChange方法以检索第一个选择对象,再次运行webservice以检索另一组数据并填充第二个选择语句.
HTML:
<div class="input-label">
Select Kittens:
</div>
<select
ng-model ="options"
ng-options ="option.name for option in options"
ng-change="onChange(options)">
<option>--</option>
</select>
<br>
<div class="input-label">
Select Age:
</div>
<select
ng-options ="detail.age for detail in details">
<option>--</option>
</select>
控制器:
.controller("ctrl",['$scope',function($scope){
$scope.options = [
{id:1, name:'typeA'},
{id:2, name:'typeB'},
{id:3, name:'typeC'},
{id:4, name:'typeD'}
]
$scope.onChange = function(item){
console.log("Hi world!");
console.log(item);
$scope.details = [
{id:1, age:'11'},
{id:2, age:'10'},
{id:3, age:'9'},
{id:4, age:'6'}
]
};
}])
问题:
1)选择第一个选择后,该值将从选择框中消失,但值(对象)将成功传递给onChange函数
2)无法填充第二个选择框
我创建了一个plunkr来复制我的问题(没有webservice).谢谢!