The clever use of Ionic ng-class in the chat function, ionicng-class

The clever use of Ionic ng-class in the chat function, ionicng-class

Many people are asking me if I am an ionic? Or react? In fact, I just want to tell you to see the document. How can I know which one is suitable? Hey, but I won't answer this question when I really ask this question. Isn't that crazy? Hahaha

I have never used react, so today I will not make any comments. However, I have been using ionic in projects. What I want to say is that it is really useful.

In the previous article, we introduced css3 to implement the layout of the chat interface. Now let's take a look at how to interact with data on pages.

<! -- Chat interface --> <div ng-class = "{true: 'leftd ', false: 'rightd'} [isUser (c. sender)] "ng-repeat =" c in chatAll "> <span ng-class =" {true: 'leftd _ H', false: 'rightd _ H'} [isUser (c. sender)] "> </span> <div ng-class = "{true: 'speech left ', false: 'speech right'} [isUser (c. sender)] "> {c. data }}</div> </div>

　　

Controller. js

// The returned information is $ scope with the ID of the sender or receiver. isUser = function (chatId) {if (chatId = cid) {return true ;}else {return false ;}};

Note: In the project, we determine based on the sender's ID.IsUser (c. sender)

The true/false method is used to determine the class to be used.

Second, what are the usage methods of ng-class?

In angular, we provide three solutions for class processing:

In the previous experiences of Angularjs development, we mentioned that in angular development, angular controller never contains DOM elements (html/css) and requires a simple POJO (plain object javascript object) in the controller ), fully isolated from view (interacting with angularjs framework responsibilities. However, in some projects, the most common element involved in the controller DOM is to define a variable on the controller scope. Its value is class name, as shown in the following figure:

function ctr($scope){   $scope.test =“classname”;}<div class=”{{test}}”></div>

This method is completely correct. angular provides a way to change the class, but it is always so strange to me that the controller involves classname, what I want is that controller is a clean and pure javascript object.

We continue with the following two solutions:
1. The String Array form is a simple change to the class, with exclusive changes, true is what class, false is what class, and its shape is like;

function Ctr($scope) {     $scope.isActive = true;}<div ng-class="{true: 'active', false: 'inactive'}[isActive]"></div>

The result is a combination in 2. If the isActive expression is true, it is active and inactive.

2. Object key/value processing mainly targets complex class mixing, which is like:

When isSelected = true, the selected class is added,
When isCar = true, the car class is added,
Therefore, you may have four combinations.

We recommend using two or three methods. We do not recommend that you put the class on the controller scope. The scope must be pure. The scope can only be data and behavior.

This is the end of today's conclusion. If something is wrong, I hope you can point it out more. Let's make progress together. Happy learning! What ......