Javascript ng模型在select中的选择更改时未得到更新
嗨,我是新来的,所以仍然在为一些基本的事情而挣扎,这是我面临的一个问题。我有几个html元素可以用ng repeat重复。其中一个控件是下拉列表。 我已经附上了这个ng模型。但是在选择更改时,模型没有得到更新。不确定问题是什么。在代码下面粘贴 HTMLJavascript ng模型在select中的选择更改时未得到更新,javascript,html,angularjs,Javascript,Html,Angularjs,嗨,我是新来的,所以仍然在为一些基本的事情而挣扎,这是我面临的一个问题。我有几个html元素可以用ng repeat重复。其中一个控件是下拉列表。 我已经附上了这个ng模型。但是在选择更改时,模型没有得到更新。不确定问题是什么。在代码下面粘贴 HTML <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title&
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>Compare Tickers</h1>
<hr/>
<div ng-controller="MainCtrl">
<!-- <p>The ID is {{greeting.id}}</p>
<p>The content is {{greeting.content}}</p>-->
<ul>
<li id="control{{$index}}" ng-repeat="oneTickerInfo in tickerInfo">
Ticker Info : <input type="text">
<select ng-model="selectedCache" ng-options="cache for cache in caches" ng-change="handleCacheSelectionChange()"></select>
<select ng-click="handleHostSelectEvent()" ng-init="selectedBox = boxes[0]" ng-model="selectedBox" ng-options="box.box for box in boxes"></select>
[<a href ng-click="tickerInfo.splice($index, 1)">X</a>]
</li>
<li>
[<a href ng-click="tickerInfo.push({})">add</a>]
</li>
</ul>
<hr/>
<div ui-view></div>
</div>
</body>
</html>
比较股票行情
-
股票信息:
[]
-
[]
JAVASCRIPT
'use strict';
var app = angular.module('qaweb3App');
app.controller('MainCtrl', function Hello($scope, $http) {
$scope.tickerInfo = [
{id:'1', cache:'adx',host:'tpa27'},
{id:'1', cache:'asx',host:'tpa27'}
];
$scope.caches = [];
function process_response( data ) {
var jsonArrayLen = data.length;
for( var index=0; index < jsonArrayLen; index ++ ) {
$scope.caches.push( data[index].cache.id);
}
/*$scope.selectedCache = $scope.caches[0];*/
console.log( $scope.caches.toString() );
}
$http({method: 'JSONP', url: 'http://unixdeva10.factset.com:9643/jsonprouter?callback=JSON_CALLBACK&key=caches.json'}).
success(function(data, status, headers, config) {
process_response(data);
}).
error(function(data, status, headers, config) {
alert("Failed");
});
$scope.getHosts = function() {
console.log("You clicked box");
};
$scope.handleCacheSelectionChange=function() {
console.log("Selection has changed");
console.log( " You have chosen selection " + $scope.selectedCache );
}
});
“严格使用”;
var app=角度模块('qaweb3App');
app.controller('MainCtrl',函数Hello($scope,$http){
$scope.tickerInfo=[
{id:'1',缓存:'adx',主机:'tpa27'},
{id:'1',缓存:'asx',主机:'tpa27'}
];
$scope.caches=[];
功能过程\响应(数据){
var jsonArrayLen=data.length;
对于(var index=0;index
尽管选择发生了更改,但选择始终保留第一个元素
HTML源代码
<select ng-model="selectedCache" ng-options="cache for cache in caches" ng-
change="handleCacheSelectionChange()" class="ng-valid ng-dirty">
<option value="0" selected="selected">adx</option>
adx
在handleCacheSelectionChange函数中,$scope.selectedCache的值未定义
编辑1
根据你的建议,我尝试了以下方法:
Javascript:
$scope.tickerInfo=[
“selectedCache1”,
“selectedCache2”
];
$scope.handleCacheSelectionChange=函数(索引){
log(“您选择了选择”+索引)
}
HTML
到目前为止,一切正常。
现在我有一个href,它在ng repeat之外,所以要用另一个条目动态更新tickerInfo,我们需要内部作用域的最后一个索引。我无法将本地作用域$index绑定到全局作用域$scope.currentIndex
[<a href ng-click="handleAddEvent($index)">add</a>]
[]
谁能给我一些提示吗。提前谢谢 好的,这里的问题是您在表单中使用了ng repeat ng repeat创建(credits to),这意味着您的视图代码正在编辑不同的
$selectedCache
。因此,您无法获得预期的双向数据绑定
我认为egghead.io会有帮助
因此,控制器代码有效地与控制器$scope下的缓存对象交互。另一方面,视图中的缓存对象在该重复子范围内进行交互
要解决此问题,请在
$scope
下的数据对象中追加selectedCache
对象,例如$scope.tickerInfo[$index].selectedCache
。这样,当ng select更改所选缓存时,它会更改与控制器的绑定$scope
ng repeat
不会创建隔离作用域,但会创建一个隔离作用域。这意味着每个ng型号
正在写入不同的selectedCache
。请您创建一个提琴/code笔或其他东西好吗?我在您的标记中没有看到ngApp。没有它你是如何工作的?如果你的问题中只包含一些短的高度相关的代码以及演示问题的演示,你一定会得到更快、更高质量的帮助。如果下面的答案不能解决您的问题,请相应地更新您的问题。
[<a href ng-click="handleAddEvent($index)">add</a>]