在下面的代码中,我更改了数组第一项中的对象值,但我很难弄清楚如何"刷新"HTML视图,以便您在浏览器中看到的内容反映强制更改。
var dataArray = [{
name: 'fax.doc',
size: 100,
}, {
name: 'fax.pdf',
size: 110,
}, {
name: 'fax.xls',
size: 120,
}];
(function() {
var app = angular.module('myApp', []);
app.controller('AppController', function() {
this.files = dataArray;
});
})();
function changeSomething() {
dataArray[0].name = "facsimile.doc";
// alert(dataArray[0].name);
}
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="AppController as box" onload="changeSomething()">
<table border="1">
<tr ng-repeat="file in box.files">
<td>{{file.name}}</td>
<td>{{file.size}} bytes</td>
</tr>
</table>
</body>
</html>
需要从Angular上下文中调用一些东西。C
将app.controller部分更改为:
app.controller('AppController', function() {
this.files = dataArray;
this.changeSomething = function() {
dataArray[0].name = "facsimile.doc";
alert(dataArray[0].name);
};
});
html为:
<body ng-controller="AppController as box" ng-init="box.changeSomething()">
您可以使用ng-init()(native angularjs)来更改值,而不是使用onload()nativejavascript):
控制器(您在控制器中的功能):
app.controller('AppController', function() {
var vm = this;
vm.files = dataArray;
vm.changeSomething= function() {
vm.files[0].name = "facsimile.doc";
alert(dataArray[0].name);
};
});
HTML
<body ng-controller="AppController as box" ng-init="changeSomething()">
//your code here
</body>