在AngularJS中,数据绑定是通过指令和表达式来实现的。要绑定对象属性和原始对象,可以使用ng-model指令和表达式。
以下是一个示例代码,展示了如何在AngularJS中实现对象属性和原始对象的数据绑定。
HTML部分:
对象属性数据绑定
姓名:{{person.name}}
原始对象数据绑定
姓名:{{name}}
JavaScript部分:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
// 定义一个对象属性
$scope.person = {
name: 'John'
};
// 定义一个原始对象
$scope.name = 'Jane';
});
在上面的示例中,ng-model
指令用于将输入框的值与person.name
和name
进行双向绑定。当输入框的值发生变化时,对象属性person.name
和原始对象name
的值也会随之改变。在HTML部分,我们使用双括号{{}}
来显示绑定的值。
这样,当你在输入框中输入一个新的值时,对象属性和原始对象的值都会更新。