如何使用单击和悬停更改类

时间:2016-08-22 07:07:09

标签: angularjs mouseover ng-repeat angularjs-ng-click mouseleave

查看:

<a ng-repeat="control in controls | filter:name" ng-href="#{{control.id}}" ng-click="restart(control.name)" ng-class="{active: control.name == selected}">{{control.name}}

控制器 - app.js

$scope.restart = function (controlName) {
    $scope.selected = controlName;
}

这里我在点击时添加了活动类。我可以使用鼠标悬停添加悬停类,并使用鼠标离开卸载类。

2 个答案:

答案 0 :(得分:1)

使用ng-class,ng-mouseover anf ng-mouseleave:

public static async Task<string> Upload(byte[] data, string fileName, string uri)
{
    HttpClient client = new HttpClient();
    HttpMultipartFormDataContent content = new HttpMultipartFormDataContent("Upload----" + DateTime.Now.ToString(System.Globalization.CultureInfo.InvariantCulture));
    InMemoryRandomAccessStream contentStream = new InMemoryRandomAccessStream();
    DataWriter dw = new DataWriter(contentStream);
    dw.WriteBytes(data);
    await dw.StoreAsync();
    await dw.FlushAsync();
    dw.DetachStream();
    contentStream.Seek(0);
    HttpStreamContent streamContent = new HttpStreamContent(contentStream);
    content.Add(streamContent, "MIMEFile", fileName);
    try
    {
        using (var message = await client.PostAsync(new Uri(uri), content))
        {
            if (message.StatusCode != HttpStatusCode.Ok)
            {
                return String.Format("ERROR ({0})",message.StatusCode);
            }
            var result = await message.Content.ReadAsStringAsync();
            return result;
        }
    }
    catch (Exception ex)
    {
        return String.Format("ERROR ({0})", ex.Message);
    }
}

感谢您的回复。我想在点击时添加“主动”课程。我想在“悬停”时添加“hover”类

答案 1 :(得分:1)

如上所述,使用ng-classover和ng-mouseover的ng-class:

<div ng-class="class" ng-click="class='active'" ng-mouseover="class='hovering'" ng-mouseleave="class=''"></div>

这样,你就可以有3个事件监听器(以互斥的方式)。

如果您想同时使用两者,请以这种方式使用数组:

<div ng-class="[classClick, classHover]" ng-click="classClick='active'" ng-mouseover="classhover='hovering'" ng-mouseleave="classHover=''"></div>