Как обнаружить тег изображения в AngularJS?

Question

Как обнаружить тег изображения в AngularJS?

0

Я пытаюсь отобразить данные с использованием фабрики. Я могу показать данные, но у меня есть одна проблема: на самом деле я получаю данные в <img>. Я не хочу показывать этот тег img в своей колонке. Я хочу определить, является ли это <img, и если да, то я хочу получить его значение src. Если это значение - flag_red.gif, тогда мне нужно установить backbground red. Если это flag_green.gif, мне нужно установить зеленый фон. Можем ли мы установить это с помощью ng-if в AngularJS? Можем ли мы обнаружить тег <img в AngularJS?

вот мой код

   function callServiceForLocalData() {
    acservice.callDisputeServiceLocal(function(data) {
        showViewAfterSuccess(data)
    }, function(data) {
        console.log("error on callTaskListServiceLocal");
    });
}

Pallavi Sharma 06 июль 2015, в 18:10

Источник

Теги:

javascript

angularjs

angularjs-scope

angularjs-directive

angularjs-ng-repeat

2 ответа

Ещё вопросы

Daniel Beck · Answer 1 · 2015-07-06T14-45-00.000Z

Вложение экранированного HTML внутри вашей базы данных - ужасная стратегия. Вы сохраняете

     "fieldNameOrPath": "akritiv__Contact_Risk__c",
      "value": "<img src=\"/img/samples/flag_red.gif\" alt=\"red\" height=\"16\" width=\"16\" border=\"0\"/>"

Через 6 месяцев, когда вы хотите перепроектировать свою страницу, чтобы иметь 24-пиксельный флаг, вы ввернуты. Было бы гораздо менее хрупким хранить что-то вроде

     "fieldNameOrPath": "akritiv__Contact_Risk__c",
      "value": "red"

и вместо этого разместите HTML- <img>. (Имя поля "fieldNameOrPath" подразумевает более глубокие проблемы, но я не собираюсь туда пробираться.) (Даже красный/зеленый, вероятно, слишком специфический, это может быть просто старым булевым.)

В стороне, одна стратегия здесь заключалась бы в использовании ng-класса для управления вашим дисплеем на основе значения объекта:

<div class="col  (...etc...)" ng-repeat="i in task_column_name" ng-if="i.checked"
ng-class="{
redBackground: column[i.fieldNameOrPath]=='your db string here',
greenBackground: column[i.fieldNameOrPath]!='your db string here'}">...</div>

(и установите.redBackground и.greenBackground описания в вашем CSS.)

В качестве альтернативы используйте ng-if или ng-switch для рисования различных узлов DOM в зависимости от значения столбца.

PBLC · Answer 2 · 2015-07-06T13-35-00.000Z

Если вы пытаетесь контролировать отображение на основе положительного или отрицательного изображения, я бы не выводил эту информацию исключительно из URL-адреса изображения, которое вы передаете ему. На самом деле, я бы так и не передал src изображения в данных. В стороне, у меня есть два варианта, которые, я думаю, могут помочь.

Используя CSS, вы можете использовать свойство src для создания определенных стилей. Это неудобно, и я не обязательно буду предлагать это, но это будет выглядеть примерно так:

img[src='flag_red.gif]{
    background-color: red;
}

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

value: "<img src="/img/samples/flag_red.gif" alt="red" height="16" width="16" border="0"/>"

Когда вы сможете пройти

value: 'negative'

и просто используйте значение, чтобы отобразить разметку, которую вы хотите, с помощью ng-if или ng-show

<img ng-show=' value == "negative" ' src='/img/samples/flag_red.gif' />

РЕДАКТИРОВАТЬ:

Другой способ (если вы не контролируете данные json), - это фактически проанализировать строку, которую вы получаете в значении "src=", и использовать значение.

Что-то вроде

if( value.indexOf('src="') > -1)
    var newValue = value.split('src="')[1].split('"')[0];
}

даст вам

/img/samples/flag_red.gif

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