Question

我正在使用角度材料1，并且当窗口大小不满足＆＃34; gt-sm＆＃34;时想要隐藏sidenave。以下是控制器代码。

 .controller('mainpageController',mainpageAction);

function mainpageAction($scope,$mdMedia,$window){
    //state variable for mainpage.
    $scope.sideNavVisibility = $mdMedia('gt-sm');

    /* function definition for mainpage; bind this function using ng-click when user click on side menu */
    $scope.showSideNav = function(defaultDisplay){
        $scope.sideNavVisibility = true;
    };
    angular.element($window).bind('resize', function(){
        console.log($mdMedia('gt-sm'));
        $scope.$apply(function() {
            $scope.sideNavVisibility = $mdMedia('gt-sm');
        });
    });
}

下面是我正在使用它的HTML模板。

<body md-theme="mainpage" ng-controller="mainpageController">
<div layout="row" layout-fill="true">
<md-sidenav class="md-sidenav-left" md-is-locked-open="{{sideNavVisibility}}" flex="none">

在控制台中我获得了正确的值。当屏幕侧比960px更大时，它正在记录＆＃34; true＆＃34;价值其他＆＃34;假＆＃34;。但仍然没有将变化应用到视图中。

这里我基本上想要显示sidenav，如果屏幕尺寸大于960px，即＆＃34; gt-sm＆＃34;或者当不超过＆＃34; gt-sm＆＃34;然后当用户点击侧面菜单图标时。

Answer 1

从提供给{{ }}属性的表达式中删除双花括号md-is-locked-open：

<body md-theme="mainpage" ng-controller="mainpageController">
    <div layout="row" layout-fill="true">
    <md-sidenav class="md-sidenav-left"
                <!-- REMOVE double curly brackets 
                md-is-locked-open="{{sideNavVisibility}}"
                -->
                md-is-locked-open="sideNavVisibility"                     
                flex="none">

双花括号将布尔值false转换为字符串"false"。在JavaScript中，字符串"false"是真实的而不是虚假的。事实上，任何长度大于零的字符串都是真实的。这是JavaScript的一个怪癖。

有关详细信息，请参阅MDN JavaScript Reference - falsy

Answer 2

要根据Angular中的条件显示/隐藏元素，您只需使用ng-show或ng-hide。

public void btnUpdate_Click(object sender, EventArgs e)
{
    if (txtName.Text != "" && txtRollNo.Text != "" && txtRegdNo.Text != "" && txtProgram.Text != "" && txtValidity.Text != "" && pBoxPhoto.Image != null && pBoxQR.Image != null)
    {
        scommand = new SqlCommand("update tblRegistration set name=@name,rollno=@rollno,regdno=@regdno,program=@program,address=@address, validity=@validity where ID=@id", connection);

        scommand.Parameters.AddWithValue("@id", txtID.Text);
        scommand.Parameters.AddWithValue("@name", txtName.Text);
        scommand.Parameters.AddWithValue("@program", txtProgram.Text);
        scommand.Parameters.AddWithValue("@regdno", txtRegdNo.Text);
        scommand.Parameters.AddWithValue("@rollno", txtRollNo.Text);
        scommand.Parameters.AddWithValue("@validity", txtValidity.Text);
        scommand.Parameters.AddWithValue("@address", txtAddress.Text);

        connection.Open();
        sCommand.ExecuteNonQuery();

        MessageBox.Show("Record Updated Successfully");
        clearData();
        dataGridView1.DataSource = null;
        fillData();

        connection.Close();
        clickable();
    }
    else
    {
        MessageBox.Show("Please Provide Details!");
    }
}

angular js - scope.apply没有按预期工作

2 个答案: