发表于: 2018-07-02 22:48:24
1 384
今天完成的事情:
1.用Angularjs ng-options指令写了下拉列表。
在学习Angularjs之前,下拉列表是用HTML <select> 标签写的
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
学了Angularjs,可以用Angularjs ng-options指令实现下拉列表。
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="item for item in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});
</script>
2.学习ng-change指令
ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。
ng-change 指令需要搭配 ng-model 指令使用。
当输入框的值改变时执行函数:
<body ng-app="myApp">
<div ng-controller="myCtrl">
<p>在输入框中输入一些信息:</p>
<input type="text" ng-change="myFunc()" ng-model="myValue" />
<p>输入框已经修改了 {{count}} 次。</p>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.count = 0;
$scope.myFunc = function() {
$scope.count++;
};
}]);
</script>
</body>
<input>, <select>, 和 <textarea> 元素都可以使用ng-change 指令
3.
3.1 为分页添加ng-change事件,
ng-change="change()"
3.2 请求当前分页的数据
size: $stateParams.size
明天计划的事情:写搜索部分
遇到的问题:写了两个日历表,它们会同时出现。
收获:ng-options指令、ng-change指令
评论