angularJs中的ng-click指令

阿新 • • 發佈：2019-01-14

1.引入angular.min.js

2.建立module，controller並引入

3.利用$scope作用域傳入資料，並在頁面顯示

4.$scope中定義add和reduce方法，頁面中用ng-click呼叫方法，處理點選事件。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="angular.min.js"></script>
</head>
<body ng-app="module" 
>
<div ng-controller="ctrl">
    商品名稱:{{goods.data.title}} <br/>
    價格:{{goods.data.price}}<br/>
    購買數量: {{goods.data.num}} 件<br/>
    總計:{{goods.data.price*goods.data.num}} 元<br/>
    <button ng-click="goods.add()">增加</button>
    <button ng-click="goods.reduce()" 
>減少</button>
</div>
<script>
    var m = angular.module('module', []);
    m.controller('ctrl', ['$scope', function ($scope) {
        $scope.goods = {
            data: {'title': 'apple mac', 'price': 300, 'num': 0},
            add: function () {
            $scope.goods.data.num =Math 
.min(++$scope.goods.data.num, 100);
            },
            reduce: function () {
            $scope.goods.data.num = Math.max(--$scope.goods.data.num, 0);
            }
        }
    }]);
</script>
</body>
</html>

AngularJS中ng-include指令實現頭部和尾部的共用

在使用AngularJS的時候，我們可以使用ng-include指令實現頁面頭部和尾部的共用，。不過在使用ng-include指令的時候也是需要注意一些細節的。就是共用的頭部和尾部的路徑在ng-include中寫法 <!DOCTYPE html> <htm

angularJs中的ng-click指令

1.引入angular.min.js 2.建立module，controller並引入 3.利用$scope作用域傳入資料，並在頁面顯示 4.$scope中定義add和reduce方法，頁面中用n

【踩坑】angularJS 1.X版本中 ng-bind 指令多空格展示

ext 數據庫查詢 sci 接收可能 color 最終數據目的做項目的時候遇到的問題 1、問題描述　　用戶在表單某個值輸入多個空格，例如：A B，保存至服務器　　在列表查詢頁面中使用bg-bind的指令單向綁定，結果展示位A B，連續的空格被替換

AngularJS 中ng-model通過$watch動態取值

blog html lib brush google java logs con head 這個例子的意思是，當xxxx的長度不超過6時，xxxx和yyyy兩個input的model是無關的，但當xxxx超過6，則yyyy會跟隨其值而變化。 <!doctype

AngularJS中ng-class使用方法

sselect sna cte ctr select sse project iss 同時有三種方法： 1、通過$scope綁定（不推薦） 2、通過對象數組綁定 3、通過key/value鍵值對綁定實現方法： 1、通過$scope綁定（不推薦）： func

AngularJs 的ng-include指令的使用

AngularJs通過指令ng-include來將頁面中共用的模組分離出來，這個功能和mvc裡面的分部頁的作用一樣的。先看檔案的結構：父頁面： <!DOCTYPE html> <html> <head> <meta charset="

angular中 ng-if 指令中的ng-model等指令失效問題

很多angular的指令會自己建立子作用域,平時多注意點就好了因為ng-if建立了子的作用域,所以原來的寫法在controller中的$scope作用域中時取不到值,需要這麼寫見圖這樣寫就可以在對應的clientConfigCtrl中取到mySelectVal等

AngularJS中ng-options實現下拉列表的資料繫結

下拉列表的簡單使用 ng-option指令使用很簡單，只需要繫結兩個屬性：一個是ng-model用於獲取選定的值；另一個是ng-options用於確定下拉列表的元素陣列。 <select ng-model="engineer.currentActivit

Angularjs中ng-select和ng-options用法【select聯動資料】

1、使用前景最近在使用angualr專案中遇到select聯動資料，嘗試了很多次都失敗，終於在查找了很多資料以後解決了問題。 2、介紹ng-select ng-select用來將資料同HTML的標籤進行繫結。這個指令可以和ng-model以及ng-

Angular 動態生成html中 ng-click無效

1 bodyApp.controller('customersCtrl', function ($scope, $http, cfpLoadingBar,$compile) { 2 $scope.test = function(){ 3 alert('test');

AngularJS中ng-repeat渲染完成事件和中間變數的引用

ng-repeat渲染完成事件因為在用AngularJS期間, 經常用到ng-repeat, 而有時需要在其渲染完成時操作已經渲染的物件, 所以特在此記錄一下新增渲染事件的方法, 以方便以後的使用; 程式碼如下 myApp.directive('onRepeatFin

AngularJS中ng-class的用法總結

一、什麼是ng-class ng-class是AngularJS預設的一個指令(directive)，通過這個指令能夠對html元素的類(class)進行動態地設定。二、在什麼場景下用ng-class 在需要動態修改html元素的時候...所以其實這個問題等價於什

AngularJS中ng-repeat使用心得

ng-repeat這樣類似的指令是會建立一個新的作用域的，並且建立的新的作用域是原型繼承的。這點其實和我的一篇《AngularUI之Modal的子作用域研究》類似，這次我也對指令的子作用域進行了研究，發現他們的建立子作用的方式是一樣的。下面是我的實驗程式碼

AngularJS中Directive（指令）機制詳解

AngularJS 通過被稱為指令的新屬性來擴充套件 HTML。 AngularJS 通過內建的指令來為應用新增功能。 AngularJS 允許你自定義指令。指令的作用：實現語義化標籤。使用AngularJS的directive（指令）機制，我們

解決AngularJS中ng-repeat不更新檢視的問題

最近寫AngularJS專案中，遇到一個問題，先對陣列進行賦值，ng--repeat正常工作，然後對陣列進行修改，ng-repeat似乎沒有工作，檢視沒有更新。原因是ng-repeat會已預設值排序，由於我的陣列中的元素有重複，所以ng-repeat沒有對重複的元素進行

Angularjs中ng-repeat與移動端滑動外掛iScroll的衝突

IScroll是在移動端開發的過程中會經常使用到的一個外掛，但當其與angularjs中的ng-repeat指令配合使用時，很有可能會導致iScroll外掛失效或者滑動不正常，另外當ng-repeat迴圈的列表動態增加時也會導致滑動不正常。滑動不正常原因：

AngularJS中 ng-repeat 排序後的 $index變化

“有客戶投訴，說在刪除指定的某條記錄時,結果刪掉的卻是另外一條記錄!” 看起來是個很嚴重的BUG。有一次我們在工作中碰到了這個問題。要定位這個BUG非常麻煩, 因為客戶也不清楚如何重現這個問題。後來發現這個Bug是由於在 ng-repeat 中使用了 $inde

AngularJS之ng-if指令

圖片 attr user clas javascrip 我們 scores 對象 name 1、問題背景 AngularJS利用ng-if指令來判斷對象元素是否為空 2、實現源碼 <!DOCTYPE html> <html ng-app

angularJs中ng-repeat遍歷動態生成的表單元素繫結ng-model無效的問題

我在做練習中偶然遇到這個問題，與大家分享一下。我也是剛開始接觸angularJs,相信也有人同樣遇到過。問題描述：在使用anjularJs框架核心模組ng雙向資料繫結，在ng-repeat遍歷物件或陣列的時候，用ng-model繫結動態生成表單元素時，利用$sco

關於AngularJS中ng-repeat問題（問卷遍歷問題）

option_val = []; var count = 0; $scope.submitText = function () { var type = document.getElementsByTagName("input");

angularJs中的ng-click指令

相關推薦