我在我的一个div中有一个下拉列表,我从中选择了第二个div中的下拉数.我的任务是能够从第二个div中的每个下拉列表中选择不同的值.这是我正在尝试的代码
<div ng-repeat="i in getNumber(secondN2.core.r1r2.value) track by $index">
<div>
<strong><u>For Core link number {{$index+1}}:</u> </strong><br>
<strong>Select IM</strong>
<select ng-model="im" ng-change="calculate()" >
<option value="1 Gig" selected="selected">1 Gig</option>
<option value="10 Gig">10 Gig</option>
</select><br>
</div>
</div>
secondN2.core.r1r2.value是一个数字,我通过在getNumber方法中返回新的Array(n)将它转换为数组,一个集合
在这种情况下如何给出合适的ng模型？以及如何检索值？
如果我尝试给予i.im,它仍然没有帮助.随着im,$scope.im即将到来undefined
更新
什么是两个嵌套循环
<div ng-repeat="j in secondN3.core" style="border:1px solid;">
<strong>Configure Core Links between {{j.name}}</strong><br><br>
<div ng-repeat="i in getNumber(j.value) track by $index">
<div>
<strong><u>For Core link number {{$index+1}}:</u> </strong><br>
<strong>Select IM</strong>
<select ng-model="secondN3.coreValues[[$parent.$index,$index]]" ng-change="calculate()" …我有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).谢谢!
我已按照以下链接解决问题,但它不起作用: 如何使用AngularJS获取选项文本值？
我有一个包含一组服务器的下拉列表.当我从下拉列表中选择一个值时,我希望所选值显示在一个单独的div中.这是我做的:
选择控制:
<select name="source" class="form-control input-sm"
ng-model="filterOptions.hostId"
ng-options="s.id as s.hostName for s in physicalServerList"
ng-style="{'width':'100%'}">
</select>
显示所选文本:
<span class="pull-left">Source: {{ filterOptions.hostId.hostName }}</span>
但是,这不会显示所选文本.我究竟做错了什么？
我的范围内有一个对象数组,我将它们列在下面的下拉控件中.
<select ng-model="selectedItem" ng-options="product.ID as product.Name for product in products">
<option value="">Please select a product...</option>
</select>
我还希望将selectedItem作为对象来获取对象的其他属性,以便我可以在页面中进行内容管理.例如;
<a ng-show="selectedItem.isAvailable">Buy Now!</a>
谁能帮我这个？谢谢.
我正在尝试编辑ng-controller元素外部的视图.我能够通过使用$rootScope和dom操作来解决它,但我想知道如何通过原生angularjs解决它？
HTML:
<body>
<div class="container">
<div class="block" ng-controller="BlockController as block">
<div><strong>Name:</strong> {{ block.name }}</div>
<a href ng-click="block.edit()">Edit</a>
</div>
</div>
<div class="container-editor">
<div id="block-editor"></div>
</div>
</body>
JS:
angular.module('app', [])
.controller('BlockController', BlockController);
function BlockController($compile, $scope)
{
this.name = 'default name';
this.edit = function() {
var $editor_html = ' <input type="text" ng-model="block.name" name="name" /> <a href ng-click="block.save()">Save</a>';
$editor_html = $compile($editor_html)($scope);
angular.element(document.querySelector("#block-editor")).html('').append($editor_html);
};
this.save = function() {
// save block
angular.element(document.querySelector("#block-editor")).html('');
};
}
这是一个例子
我正在编写一个需要ngModel的指令,并添加格式化程序和解析器来操作该值.它工作得很好,但由于操作依赖于外部数据,我必须观看,我正在寻找一种方法来更新这款手表的模型值.我试着打电话$setViewValue但没有任何反应(因为$ viewValue没有改变??).
在下面的简单示例中,对"factor"的更改不会更新模型值:
angular.module('app', []).directive('multiply', multiplyDirective);
function multiplyDirective() {
return {
restrict: 'A',
require: 'ngModel',
scope: {
factor: '=multiply'
},
link: function(scope, elem, attr, ngModel) {
ngModel.$formatters.push(function (value) {
return value / scope.factor;
});
ngModel.$parsers.push(function (value) {
return value * scope.factor;
});
scope.$watch('factor', function () {
// how to run the parsers pipeline to update modelvalue?
ngModel.$setViewValue(ngModel.$viewValue);
});
}
}
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<body ng-app ng-init="factor = 1; value = 1">
<input type="number" ng-model="value" multiply="factor" /> x
<input …所以基本上,我想要一个指令,只要viewValue不为空,就更新输入的类.这是代码.
angular.module('app').directive('input', function() { return {
restrict: 'E',
require: '^?ngModel',
link: function(scope, element, attrs, ngModelController) {
if (ngModelController === null) return;
var updateClass = function() {
if (!(ngModelController.$isEmpty(ngModelController.$viewValue))) {
element.addClass('input-has-value');
} else {
element.removeClass('input-has-value');
}
}
ngModelController.$viewChangeListeners.push(function() {
updateClass();
});
}
};
});
但我错过了一些东西,因为它永远不会触发updateClass方法.我究竟做错了什么？它永远不会触发updateClass方法..
angularjs angularjs-directive angular-directive angularjs-ng-model
这是代码HTML:
<div ng-controller="SelectCtrl">
<p>selected item is : {{selectedItem}}</p>
<p> age of selected item is : {{selectedItem.age}} </p>
<select ng-model="selectedItem" ng-options="item.name for item in items">
</select>
</div>
这是代码AngularJS:
var app = angular.module('myApp', []);
app.controller('SelectCtrl', function($scope) {
$scope.items = [{name: 'one', age: 30 },{ name: 'two', age: 27 },{ name: 'three', age: 50 }];
$scope.selectedItem = $scope.items[0];
console.log($scope.selectedItem); //it's not update :(
});
在视图中,每次更改选择时都会更新新值,但控制器不会更新选择的当前值.我该怎么办？
谢谢!
我无法从控制器中的对象将数据放入ng-model中.
VIEW1:
<input type="text" class="user-input" name="profile.firstname" ng-model="profile.firstname" ng-minlength="2" required pattern=".{2,}" placeholder="E.g. Anvika" title="Please enter atleast 2 characters">
当我单击VIEW2中的按钮时,它会触发一个函数(比如函数'test').
视图2
<input type="submit" ng-click="register.test()" ui-sref="doctorRegister" value="Profile">
控制器:
var app = angular.module('app');
app.controller('registerController', ['$scope', 'tempDataStorageService', function ($scope, tempDataStorageService) {
var register = this;
register.doctor = {};
register.test = function () {
register.refreshProfile = tempDataStorageService.get(register.doctor.profile);
//console.log(register.refreshProfile);
var a = register.refreshProfile.firstname;
console.log(a);
}
}
TempDataStorageService:
var app = angular.module('app');
app.factory('tempDataStorageService', function() {
var savedData = {};
function set(data) {
savedData = data;
}
function get() …angularjs angularjs-scope angular-ui-router angular-ngmodel angularjs-ng-model
我正在尝试设置ng-selected我的option元素,selected属性设置为true,但未option选中,当我ng-model从中删除后select变得有效.
问题:option当我使用模型时如何选择？
这是我的plunker(selected不在这里工作)
我的代码:
var app = angular.module("plunker", []);
app.controller("TestController", ["$scope", function($scope) {
$scope.test = 1;
$scope.array = [
{"id": 1, "name": "first"},
{"id": 2, "name": "second"},
{"id": 3, "name": "third"}
];
}]);
我的模板:
<body ng-controller="TestController">
Selected item must be {{ array[test-1].name }}
<select ng-model="myModel">
<option value="">Choose item..</option>
<option ng-repeat="item in array"
ng-value="item.id"
ng-selected="item.id == test">
{{ item.name }} …