Question

如何根据条件将SVG图像集成到angularjs中。我正在为此使用。

<ng-include src="'assets/images/{{ [(titleImages | orderBy: 'findorder' | first).uniqueid] }}'"></ng-include>

下面是图像路径。

$scope.titleImages =  {
  "3" : 'assets/images/valueStoryAccessIcon.svg',
  "4" : 'assets/images/brandChoiceIcon.svg',
  "6" : 'assets/images/treatmentExperienceIcon.svg',
}

这些是我的头衔

$scope.titles = {
  "1": "Activation",
  "2": "Available",
  "3": "Story Access",
  "4": "Choice",
  "5": "Trade",
  "6": "Experience",
  "7": "Outcome"
};

我需要的是

titleimages应该基于标题显示，例如：如果titleImage键为“ 3”，则应在“ story access”的“ 3” rd title中显示。
与一切相同。

if (title === "Choice") {
  imageSrc = 'assets/images/brandChoiceIcon.svg';
}

这就是我想要的。谁能告诉我如何在angularjs中实现这一目标。我该如何整合呢？有什么可能性？

Answer 1

可以在控制器中完成两个不同对象的映射。根据其键映射“ titleImages”和“ titles”。

 var mapObj = (keysMap, obj) => {

    return Object.keys(obj).reduce((acc, key) => {

      const renamedObject = {
          [obj[key] || key]:keysMap [key]
      };

      return {
        ...acc,
        ...renamedObject
      };
    }, {});
  };

 $scope.modifiedObj= mapObj(titleImages, titles);

结果将是这样的JSON对象：

{"Activation": undefined, "Available": undefined, "Story Access": "assets/images/valueStoryAccessIcon.svg", "Outcome":undefined, "Choice": "assets/images/brandChoiceIcon.svg", "Trade": undefined,"Experience":"assets/images/treatmentExperienceIcon.svg" }

然后在src中，您可以根据标题直接访问。

根据条件在AngularJS中动态集成SVG图像

1 个答案: