Динамическое изменение цвета привязки текста с помощью AngularJS

-1

Я хочу изменить цвет конкретного текста в точке зрения при появлении слова «Sinux» (без учета регистра), должен быть отформатирован жирным и красным. Я просто в состоянии связать значения мой код нижеДинамическое изменение цвета привязки текста с помощью AngularJS

<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body> 

<div ng-app="myApp" ng-controller="myCtrl"> 
<h3>Write Someting in the below input area </h3> 
Text Area: <input ng-model="name"> 
<h1>{{name}}</h1> 
</div> 

<script> 
var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 
    $scope.name = "Please enter your text input"; 
}); 
</script> 


</body> 
</html>

источник

2016-12-10 Hasan Mosharrof

Пожалуйста, объясните, какие решения вы уже попробовали первый. – niconoe

Я изменяю приведенный выше код и могу выделить выделенное слово в области точки обзора. Но проблема в области текстового поля, которую я должен написать со второй строки, а затем мои записи отображаются в первой строке. Мой вопрос в том, что я хочу писать сверху области текста, а записи должны быть видны внизу, а не сверху .. –

изменить код выше и возможность выделенного слова в области точки зрения. Но проблема в области текстового поля, которую я должен написать со второй строки, а затем мои записи отображаются в первой строке. Мой вопрос заключается в том, что я хочу писать сверху текстовой области, а записи должны быть видны ниже, а не выше.

index.html файл

<!DOCTYPE html> 
<html> 

    <head> 
    <style type="text/css"> 
     .textarea { 
    font-family: arial; 
    font-size: 12px; 
    border: 0; 
    padding: 0; 
    width: 700px; 
    height: 200px; 
} 

.realTextarea { 
    margin: 0; 
    background: transparent; 
    position: absolute; 
    z-index: 999; 
} 

.overlayTextarea { 
    margin: 0; 
    position: absolute; 
    top: 1; 
    left: 1; 
    z-index: 998; 
} 

.textareaBorder { 
    border: groove 1px #ccc; 
    position: relative; 
    width: 702px; 
    height: 202px; 
} 

.highlight { 
    background: red; 
} 
    </style> 
    </head> 
    <div class="textarea textareaBorder"> 
     <textarea id="myTextarea" onkeyup="doit();" class="textarea realTextarea"></textarea> 
     <div id="myOtherTextarea"></div> 
    </div> 
    <script type="text/javascript" src="app.js"></script> 
    </body> 
</html>

app.js файл

var _terms = ['Sinux']; 

function preg_quote(str) { 
    return (str + '').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1"); 
} 

function doit() { 
    var s = myTextarea.value; 

    for (i = 0; i < _terms.length; i++) 
    s = s.replace(new RegExp(preg_quote(_terms[i]), 'gi'), '<span class="highlight">' + _terms[i] + '</span>'); 

    myOtherTextarea.innerHTML = s.replace(new RegExp(preg_quote('\r'), 'gi'), '<br>'); 
}

источник

2016-12-11 11:22:40

Динамическое изменение цвета привязки текста с помощью AngularJS

ответ

Смежные вопросы