AngularJS：select遍历、ng SQL、ng DOM、

最新推荐文章于 2024-03-22 19:00:18 发布

原创最新推荐文章于 2024-03-22 19:00:18 发布 · 460 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#AngularJS

AngularJS 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何在AngularJS框架中使用select指令进行数据遍历，展示了一个下拉菜单示例，同时演示了如何从PHP后端获取数据并显示在页面上。此外，还展示了如何使用ng-repeat指令来显示表格数据，以及如何通过ng-disabled和ng-show/ng-hide指令控制元素的状态和可见性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

select遍历

<body ng-app='myapp' ng-controller='myctl'>
    <div class="container">
        <h1 class="page-header">angular框架</h1>

        <select class='form-control'>
			<option value="" ng-repeat='site in sites'>{{site.Url}}</option>
		</select>
    </div>
</body>
<script>
    app = angular.module('myapp', []);

    app.controller('myctl', function($scope, $http) {
        $http.get('get.php').success(function(res) {
            $scope.sites = res.sites;
        });
    });
</script>

get.php

<?php 
$str='{
    "sites": [
        {
            "Name": "菜鸟教程",
            "Url": "www.runoob.com",
            "Country": "CN"
        },
        {
            "Name": "Google",
            "Url": "www.google.com",
            "Country": "USA"
        },
        {
            "Name": "Facebook",
            "Url": "www.facebook.com",
            "Country": "USA"
        },
        {
            "Name": "微博",
            "Url": "www.weibo.com",
            "Country": "CN"
        }
    ]
}';

echo $str;
 ?>

ng sql使用.html

<body ng-app='myapp' ng-controller='myctl'>
    <div class="container">
        <h1 class="page-header">angular框架</h1>

        <table class='table table-striped table-bordered table-hover'>
            <tr>
                <th>编号:</th>
                <th>用户名:</th>
                <th>密码:</th>
            </tr>
            <tr ng-repeat='row in rows'>
                <td>{{row.id}}</td>
                <td>{{row.usename}}</td>
                <td>{{row.password}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    app = angular.module('myapp', []);

    app.controller('myctl', function($scope, $http) {
        $http.get('sql.php').success(function(res) {

            $scope.rows = res;
        });
    });
</script>

json_encode把数组转成json字符串.php

<?php 
$servername = "localhost";
$username = "root";
$password = "133nubia022";
$dbname = "myweb";
 
// 创建连接
$conn = mysqli_connect($servername, $username, $password, $dbname);

$sql = "SELECT * FROM user";

$rst = mysqli_query($conn, $sql);

while($row=mysqli_fetch_assoc($rst)){
	$rows[]=$row;
}

$str=json_encode($rows);
echo $str;
 ?>

ng-disabled方法

<body ng-app='myapp' ng-controller='myctl'>
	<div class="container">
		<h1 class="page-header">angular框架</h1>
				
		<p>
			<button class='btn btn-primary' ng-click='dis()'>禁用</button>
		</p>

		<div class="form-group">
			<label for="">留言:</label>
			<textarea class='form-control' ng-disabled='nd'></textarea>
		</div>
	</div>
</body>
<script>
app=angular.module('myapp',[]);

app.controller('myctl',function($scope,$http){
	$scope.dis=function(){
		$scope.nd=true;
	}	
});

</script>

ng-show 指令

<p ng-show="true">我是可见的。</p>

<p ng-show="false">我是不可见的。</p>

ng-hide 指令

<p ng-hide="true">我是不可见的。</p>

<p ng-hide="false">我是可见的。</p>