标签: angular-material

我正在尝试将表单输入传递给我的对话框(例如标题).问题是:它没有得到表格$scope.

如果我将$scope控制器设置为sinde,它将显示正常(参见$scope.text例如).但是,如果我尝试获取表单$scope(请参阅`$ scope.taskTitle),它就不会显示任何内容.看我的代码:

JavaScript的

app.controller('tasksCtrl', ['$scope', '$mdDialog',  function($scope, $mdDialog){


$scope.teste = 'Just a test, dude';

$scope.expandTask = function() {

    $mdDialog.show({
        clickOutsideToClose: true,
        controller: DialogController,
        scope: $scope,
        preserveScope: true,
        templateUrl: 'models/dialog.tmpl.php',
        locals: {
            id: $scope.tasklist.id,
            title: $scope.taskTitle
        }
    });

}

function DialogController($scope, $mdDialog, id, title) {

    $scope.id = id;
    $scope.title = title;

    $scope.hide = function() {
        $mdDialog.hide();
    };

    $scope.cancel = function() {
        $mdDialog.cancel();
      };
}
}]);

HTML

<div class="input-container float-icon" flex="100" layout="row" ng-repeat="task …

我正在尝试使用md-autocomplete与Algolia的Angular服务一起玩.我坚持让下拉列表显示从Algolia返回的结果.内容在控制台中,但下拉列表不会填充更新的结果.我错过了什么？

tl;博士:Plnkr

"后端"

.controller('DemoCtrl', DemoCtrl);
function DemoCtrl ($timeout, $q, $log, algolia, $http, $scope) {

   var self = this;
   self.simulateQuery = false;
   self.isDisabled    = false;
   self.repos         = loadAll();
   self.querySearch   = querySearch;
   self.selectedItemChange = selectedItemChange;
   self.searchTextChange   = searchTextChange;

   // Algolia demo keys below
   var client = algolia.Client('latency', '6be0576ff61c053d5f9a3225e2a90f76');
   var index = client.initIndex('contacts');
   $scope.query = '';
   $scope.hits = [];

   // Disable cache
   $scope.noCacheResults = false;


   // ******************************
   // Internal methods
   // ******************************
   /**
    * Search for repos... use …

我无法弄清楚如何为角度的材质设计扩展设置标签文本颜色.有代码示例.因此,我可以检查元素并看到它是由一些自定义样式设置的,一些如何被注入到页面中.如何配置虽然逃避了我.

我的标签目前是默认颜色.我尝试修改$ mdThemingProvider,但这不会改变文本颜色.

请参阅:https: //material.angularjs.org/latest/demo/tabs

它们完全符合我想要的第一个例子,其中标签文本在选择时发生变化.

编辑:显然我可以设置CSS,但我想使用已配置的模板颜色.

我一直在我的项目中使用Angular Material一段时间.使用md-select时,我遇到了一个问题,即我得到重复的md-option值错误.

我知道md-options采用唯一值,我正在为md-options分配一个数组.但是,这是一个对象数组.所以我想知道用于区分对象的标准是什么.API没有说太多.

我的用例要求根据另一个md-select的选择更改md-select的md-options.因此,我正在观看第一个md-select的选择,并在其更改时触发监视并更新第二个md-select的md-options.

以下是我用于将数组分配给md-options的方法:

$scope.$watch('search.selectedTrades', function(newTrades, oldTrades) {
    if ((newTrades.length === 0)) {
        $rootScope.search.selectedTrades = oldTrades;
        return;
    }
    if ($rootScope.search.selectedTrades && $rootScope.search.selectedTrades.length > 0) {
        if (!$rootScope.identity.isClusterManager) {
            $rootScope.search.selectedTrades = newTrades;
            SearchFilterData.setSelectedTrades(newTrades);
            $rootScope.search.selectedClusters = [];
            $scope.clusters = [];
            $scope.subareas = [];
            var clusterKeys = [];
            $rootScope.search.selectedTrades.forEach(function(t) {
                t.lstClusters.forEach(function(c) {
                    if (clusterKeys.indexOf(c.ClusterKey) == -1) {
                        clusterKeys.push(c.ClusterKey);
                        $scope.clusters.push(c);
                    }
                })
            })
        }
    } else {
        $scope.clusters = [];
        $scope.subareas = [];
        $rootScope.search.selectedClusters = [];
        $rootScope.search.selectedSubAreas = [];
        SearchFilterData.setSelectedTrades($rootScope.search.selectedTrades);
    }
});

在上面的代码中,clusterKey是每个对象的唯一实体.所以我用它来将唯一值推送到数组中.然而,在我选择和取消选择各种选项之后,这在几个随机场景中发生.请告知我做错了什么以及标记两个对象重复的标准是什么

form.html

<md-button class="md-raised md-primary pull-right formPage" ng-disabled="formPage.$invalid" ng-click ="submit()">SAVE</md-button>

的CSS

.md-button.md-raised.md-primary.formPage {
    position: right !important;
    color: #FFFFFF;
    background-color:#008cba;    
}

按钮已禁用，但具有来自CSS的自定义颜色。如何显示默认的禁用样式，或者如果禁用则更改按钮颜色？

杰斯菲德尔

我想让md-list-item中的文本可选.但是,我发现当为元素设置ng-click时,整行变成一个按钮,使用户无法选择元素上的任何文本.关于如何覆盖此功能的任何想法？

这是代码:

我有兴趣在Shopify托管页面上使用基于Angular Material的联系表单.因为网站的其余部分不是使用Angular Material构建的,所以我想以模块化的方式实现这个联系表单,并将其隔离在自己的div中.我遇到的问题是Angular Material的样式表(当前链接在头部)影响了所需影响区域之外的页面元素.是否可以将Angular Material内容与页面的其余部分隔离开来？一个人怎么可能呢？

当另一个属性发生变化时,我需要更新集合中的属性.

我的收藏是

    $scope.Persons = [
        {
            Name: "Emma",
            Mode:0,
            HasModified:false
        },
        {
            Name: "Watson",
            Mode:0,
            HasModified:false
        },
        {
            Name: "Harry",
            Mode:0,
            HasModified:false
        }
    ];

当用户选择任何选项时,属性Mode绑定在a中md-select,然后我需要将属性更新HasModified为true

HTML部分:

<tbody>
    <tr ng-repeat="main in Persons">
        <td>
            <p>{{main.Name}}</p>
        </td>
        <td>
            <md-select ng-model="main.Mode" onselect="UpdateMode(main)">
                <md-option ng-value="1">Good</md-option>
                <md-option ng-value="2">Bad</md-option>
            </md-select>
        </td>
        <td>
            <p>{{main.HasModified}}</p>
        </td>
    </tr>
</tbody>

该onselect事件无法更新更改

    $scope.UpdateMode = function(collection) {
        if((collection != null) && (collection != undefined) && (collection.Mode >0)) {
            collection.HasModified = true;
        }
    }

完整的HTML …

我在angularjs v1上使用角度材料.

我使用角度材料的简单菜单栏有问题.这是菜单栏的html代码;

<md-toolbar layout="row" class="md-whiteframe-z3" style="padding: 0px;margin:0px;float: left;">
    <h2>Test page</h2>
    <md-button href="Data1.html">Data1</md-button>
    <md-button href="Data2.html">Data2</md-button>
</md-toolbar>

当我单击Data1按钮时,浏览器URL将更改为" http://127.0.0.1/test-site/webroot/app/Data1.html ",但浏览器不会转到该网页.我必须手动刷新页面以强制浏览器转到该网页.

按下按钮后如何让浏览器转到该页面？

编辑:现有的答案有效,但它打开一个新的选项卡.我希望浏览器转到现有选项卡上的新网页.优选地,如果解决方案可以纯粹在html中,但使用javascript就可以了.我创造了一笔赏金.

我正在使用Angular 2材料创建一个应用程序,并且我正在尝试在md-sidenav-layout部分添加一个材质菜单.但是,菜单的触发器显示在页面的不同部分.

app.component.ts-我的主要组件是bootstrapped

    @Component({
        selector: 'app-root',
        template: `
        <navbar></navbar>
        <sidenav #tests></sidenav>
        `
    })

sidenav.component.ts- sidenav组件.我指的是https://github.com/angular/material2/blob/master/src/lib/menu/README.md 来创建菜单.

    @Component({
        selector: 'sidenav',
        template: `
            <md-sidenav-layout>
                <md-sidenav #start  [opened]="sidenavStatus()" (close)="reset()">
                    <md-card>
                        <p class="profile-name">Username</p>
                    </md-card>

                    <md-list class="sidenav-list">
                        <md-list-item> Add Steps </md-list-item>
                        <md-list-item> Add Sections </md-list-item>
                        <md-list-item> Add Fields </md-list-item>
                    </md-list>
                    <br>               
                </md-sidenav>

                //the actual content in the page
                <md-menu #menu="mdMenu">
                    <button md-menu-item> Refresh </button>
                    <button md-menu-item> Settings </button>
                    <button md-menu-item> Help </button>
                    <button md-menu-item disabled> Sign Out </button>
                </md-menu>
                <md-card class="step-card">
                    <md-card-title>Card with …