學習angular中

常用軟體,程式語言的筆記和疑問
Forum rules
盡量做到:
每一個貼子都精心編輯;
每一個疑問都得到解答。
Post Reply
ejsoon
Site Admin
Posts: 3533
Joined: 2016 Jan 10, 22:15

學習angular中

Post by ejsoon » 2017 Nov 10, 12:00


ejsoon
Site Admin
Posts: 3533
Joined: 2016 Jan 10, 22:15

Re: 學習angular中

Post by ejsoon » 2017 Nov 10, 16:08

這一段講得真是太好了!

Code: Select all

 <div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script> 
Application explained:

The AngularJS application is defined by ng-app="myApp". The application runs inside the <div>.

The ng-controller="myCtrl" attribute is an AngularJS directive. It defines a controller.

The myCtrl function is a JavaScript function.

AngularJS will invoke the controller with a $scope object.

In AngularJS, $scope is the application object (the owner of application variables and functions).

The controller creates two properties (variables) in the scope (firstName and lastName).

The ng-model directives bind the input fields to the controller properties (firstName and lastName).

ejsoon
Site Admin
Posts: 3533
Joined: 2016 Jan 10, 22:15

controller置外

Post by ejsoon » 2017 Nov 10, 16:14

namesController.js:

Code: Select all

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
}); 
html:

Code: Select all

 <div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

<script src="namesController.js"></script> 

ejsoon
Site Admin
Posts: 3533
Joined: 2016 Jan 10, 22:15

The filter Filter

Post by ejsoon » 2017 Nov 15, 15:01

The filter filter selects a subset of an array.

The filter filter can only be used on arrays, and it returns an array containing only the matching items.

Code: Select all

 <div ng-app="myApp" ng-controller="myCtrl">
	<p><input class="ni" type="text" ng-model="test"></p>

	<ul class="ti">
	  <li ng-repeat="x in names | filter : test">
		{{ x }}
	  </li>
	</ul>
	<div class="ki"></div>
	<div class="ka">ka</div>
</div>

<script>
angular.module('myApp', []).controller('myCtrl', function($scope, $http) {
    $scope.names = ['小美', '甩鍋', '店'];
}); 

Post Reply