1. 程式人生 > >【MVVM】- AngularJS 原生API

【MVVM】- AngularJS 原生API

ANgularJS 原生函式

  • angular.lowercase() 轉換字串為小寫
  • angular.uppercase() 轉換字串為大寫
  • angular.isString() 判斷給定的物件是否為字串,如果是返回 true
  • angular.isNumber() 判斷給定的物件是否為數字,如果是返回 true
  • agular.copy(source,destination):將原物件深度複製給目標物件:物件相關聯的物件都會拷貝一份,兩個物件完全獨立

外觀介面

<div ng-app="myApp" ng-controller="myCtrl">
原物件:<span>{{ x1 }}</span><br>
小寫字母:<span>{{ x2 }}</span><br>
小寫字母過濾器實現:<span>{{ x1 | lowercase }}</span><br>
大寫字母:<span>{{ x3 }}</span><br><br>

x4:{{x4}}<br>
x5:{{x5}}<br>
x6:{{x6}}<br>
<br>
x1是否為字串:{{flag01}}<br>
x4是否為字串:{{flag01}}<br>
x5是否為字串:{{flag03}}<br>
x6是否為數字:{{flag04}}<br>
x5是否為數字:{{flag05}}<br>

<hr>
<p>物件複製</p>
原物件:x4:<samp>{{x4}}</samp><br>
複製物件:x7:<span>{{x7}}</span><br>

<hr>
<p>函式複製</p>
<input type="button" ng-click="x9()" value="X8">
<input type="button" ng-click="x9()" value="X9">
</div>

js操作邏輯

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.x1 = "HeLLO AnguLar Js WoRld!";
$scope.x2 = angular.lowercase($scope.x1); //轉換為小寫:也可以過濾器處理
$scope.x3 = angular.uppercase($scope.x1)  //轉換為大寫字母

//注意JSON形式的物件或陣列都會被認定為字串
$scope.x4 =[{"name":"zhangsan","age":"14"},{"name":"lisi","age":"20"}];
$scope.x5=new Date();
$scope.x6=10;

$scope.flag01 =angular.isString($scope.x1);
$scope.flag02 =angular.isString($scope.x4);
$scope.flag03 =angular.isString($scope.x5);
$scope.flag04 =angular.isNumber($scope.x6);
$scope.flag05 =angular.isNumber($scope.x5);

$scope.x7=angular.copy($scope.x4);
$scope.x8=function(){
    alert("原方法:X8");
};

//實現方法複製
$scope.x9=angular.copy($scope.x8);
});

效果:

相關推薦

MVVM- AngularJS 原生API

ANgularJS 原生函式 angular.lowercase() 轉換

MVVM- AngularJS 過濾器用法

過濾器作用:對model的資料進行加工,按照相應的格式進行顯示 AngularJS

MVVM- AngularJS $scope 用法

Scope(作用域) 是應用在 HTML (檢視) 和 JavaScript (控

MVVM- AngularJS 依賴注入

依賴注入(Dependency Injection):,一個或更多的依賴(或服務)

MVVM- AngularJS 服務應用

AngularJS 服務基本用法 AngularJS 中,服務是一個函式或物件,可

MVVM- AngularJS ng-repeat 指令

外觀介面 <body ng-app=""> <

MVVM- AngularJS 下拉框操作

AngularJS 下拉框基礎應用 外觀介面 <div ng-app=&qu

MVVM- AngularJS基礎學習

Angular JS AngularJS 基礎入門案例 外觀頁面 <!--

練習angularjs(最基本的$http使用jsonp跨域,使用jsonp跨域獲取天氣(採用百度地圖天氣api),路由功能實現單頁面不跳轉切換)

1.最基本的$http使用jsonp跨域 <body ng-app="app"> <div ng-controller="controller"> </div> <script src="angularjs/angularjs.js

總結angularJs的一些用法

1、ng-true-value 當我們點選checkbox 選中複選框時,ng-model 的繫結預設值是true,取消選中時為false. <input ng-model="checkboxModel" type="checkbox" >//選中時,checkboxModel

一個很簡單的基於棧式過程虛擬機器的實現,它執行目標平臺x86原生程式碼。

    本文提供的 “棧式過程虛擬機器” 的實現,掛在本人的 github 上面,對想要深入瞭解 “棧式過程虛擬機器” 的人,它或許可以起到一個不錯的作用,但是本人建議一般性瞭解就可以了,另外順帶一提:如果你想要依靠它維持生活,在咋們國家是不可能不現實的,到時候你就只有 “多冷的

轉載js原生的節點操作

【轉載自JS獲取子節點、父節點和兄弟節點的若干種方式 – 作者:-老K-】 一、js獲取子節點的方式 1.通過獲取dom方式直接獲取子節點 其中test的父標籤id的值,div為標籤的名字。getElementsByTagName是一個方法。返回的是一個數組。在訪問的時候要按陣列的形

筆記HDFS簡單API程式碼(Java)的使用

一、構造客戶端 //1. 客戶端載入配置檔案 Configuration conf= new Configuration(); //2.指定配置,設定副本數、指定塊大小等等 conf.set("dfs.replication", "1"); co

總結AngularJs的UI元件ui-Bootstrap

引入      <script src="/Scripts/angular.js"></script>     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></scrip

AndroidSDK和API Level版本的對應關係

這裡記錄一下android的SDK和API版本號之間的對應關係,方便以後的檢視。 舉例 例如以下的 build.gradle 配置檔案指定了專案相容的最低android A

jedis常用API

轉載原文地址未知,有看到的,評論一下。立馬新增上去一、Redis Client介紹1.1、簡介Jedis Client是Redis官網推薦的一個面向java客戶端,庫檔案實現了對各類API進行封裝呼叫。Jedis原始碼工程地址:https://github.com/xetor

ElasticSearch2搜索API

高亮顯示 命中 gets 獲得 value com 超時 desc elastics 如下為一段帶有分頁的簡單搜索查詢示例 在search搜索中大部分的搜索條件添加都可通過設置SearchSourceBuilder來實現,然後將SearchSourceBuilder Re

實踐Spark RDD API實戰

map Applies a transformation function on each item of the RDD and returns the result as a new RDD. //3表示指定為3個Partitions v

前端angularJS或者jquery實現按鈕點選變色,再點選變回來

目的:使按鈕在兩種狀態之間切換,注意:簡單的通過.修改focus和active的樣式是做不到的。 效果圖: html程式碼: <div class="col-1">

WPFMVVM把滑鼠事件寫到Controller層

要使用Mouse Event,最快捷的方法便是前臺控制元件直接繫結事件,然後再後臺程式碼中實現。 在MVVM中,View層的後臺程式碼無法呼叫Contrller層的函式。(反過來可以Controller –> ViewModel –> View)