angular 基础练习

最新推荐文章于 2022-03-29 08:55:10 发布

weixin_30565199

最新推荐文章于 2022-03-29 08:55:10 发布

阅读量90

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/moreyear/p/4498145.html

版权

<!DOCTYPE HTML>
<html>
<head>
    <title> 测试页 </title>
    <meta charset="utf-8">
    
</head>
<body  ng-app="myApp">
  <div ng-controller="query">
          <input id="input" ng-model="text">
    <span ng-bind="text"></span>
    <button ng-click="submit()">提交</button>
  </div>
  
  <div class="select" ng-controller="select">
    <span ng-click="spanClick()" ng-bind="value"></span>
    <ul ng-hide="show">
      <li ng-repeat="l in list" ng-bind="l" ng-click="liClick($index)"></li>
    </ul>
  </div>
<script src="http://***/scripts/angular.min.js"></script>

</body>
</html>

JS 部分

var myApp = angular.module("myApp", []);

myApp.service("validator", function(){
    return function(str, type){
        return !!str;
    }    
});


myApp.controller("query", ["$scope", "validator", function($scope, validator){
  //$scope.abc = abc;
  console.log(abc);
  $scope.text ="hello";
  $scope.submit = function(){
        console.log('sbumit');
        var input = document.getElementById("input");
      if(!validator(input.value)){
          console.log('请输入用户名');
      }else{
          console.log('ok');
      }
    }
}]);

myApp.controller("select", function($scope){
    $scope.show = true;
      $scope.value = "请选择";
      $scope.spanClick = function(){
    $scope.show = !$scope.show;    
  }
  
      $scope.list = ["1", "2","3"];
      $scope.liClick = function(index){
        $scope.value = $scope.list[index];
      }
});