select选择框切换内容显示的两种方法

来源：互联网发布：win10下u盘安装ubuntu 编辑：程序博客网时间：2024/05/17 22:44

1.ng-include 指令用于包含外部的 HTML 文件。包含的内容将作为指定元素的子节点。ng-include 属性的值可以是一个表达式，返回一个文件名。默认情况下，包含的文件需要包含在同一个域名下。
1、标签方式：<ng-include src=“”>这里会被覆盖</ng-include>
2、属性方式：<div ng-include=“”>这里会被覆盖</div>
3、类方式：<div class=“ng-include:’ ’ ”>这里会被覆盖</div>

<!DOCTYPE html><html lang="en" ng-app="myApp"><head>    <meta charset="UTF-8">    <title>Title</title></head>    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script><body ng-controller="myController"><!--  template存放的是 templates中的每一个对象,相当于是item -->    <select ng-model="template" ng-options="item.name for item in templates">        <option value="">please choice</option>    </select>    当前加载的模板是{{template.name}} :{{template.url}}    <div ng-include="template.url">    </div>    <p>我是广告给我打电话 办证</p></body><script src="angular.min.js"></script><script>    angular.module('myApp',[])            .controller('myController',['$scope',function($scope){                $scope.templates = [                    {name:'template1',url:'template1.html'},                    {name:'template2',url:'template2.html'}                ];//                $scope.template = $scope.templates[0];                $scope.myStyle = {                    'background-color':'red'                };            }])</script></html>

<!--  template1.html  --><h1>this is template one</h1><div style="width: 200px; height: 200px; background-color: aqua"></div><div style="width: 200px; height: 200px; background-color: red"></div><div style="width: 200px; height: 200px; background-color: blue"></div><div style="width: 200px; height: 200px; background-color: green"></div><div style="width: 200px; height: 200px; background-color: peru"></div>

<!--template2.html --><!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <p ng-style="myStyle">this is template two</p></body></html>

2.不同模块的div,就是在选择的时候，设置一个ng-change指令，里面传入数字，进行判断

<select  class="form-control" ng-model="othermodel.qc_type_code_oth_param" ng-change="choice(this.othermodel.qc_type_code_oth_param)" placeholder="请选择证件类型" style="width: 250px;height:34px;" >                                                        <option value ="1">aaa</option>                                                        <option value ="2">bbb</option>                                                        <option value ="3">ccc</option>                                                    </select>

 <div class="form-group" ng-if="filter.enterpriseType==2">  </div>

$scope.choice = function(type) {    $scope.filter.enterpriseType = type;  }

阅读全文

0 0