AngularJS用单词替换整数数组

时间:2017-10-05 17:22:29

标签: angularjs arrays angular-filters

我从api收到电影类型的数字。这意味着,1 =动作,34 =戏剧,22 =恐怖....我想显示流派名称而不是数字。

{{::movie.genre_ids}}

movie.genre_ids的HTML输出:[1,34,22]

应该是这样的:恐怖动作剧......没有括号和&编号

电影有多种类型,因此也必须有效。

提前致谢

3 个答案:

答案 0 :(得分:2)

假设你在$ scope上有这样的东西:

<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
    font: 10px sans-serif;
}

.background path {
    fill: none;
    stroke: #ddd;
    shape-rendering: crispEdges;
}

.foreground path {
    fill: none;
    stroke: steelblue;
}

.brush .extent {
    fill-opacity: .3;
    stroke: #fff;
    shape-rendering: crispEdges;
}

.axis line,
.axis path {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.axis text {
    text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0       #fff;
    cursor: move;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
let margin = {top: 30, right: 10, bottom: 10, left: 10},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

let x = d3.scalePoint().range([0, width]).padding(1),
    y = {},
    dragging = {};

let line = d3.line(),
    axis = d3.axisLeft(), //Argument for axisLeft? Compare to code on original plot
    background,
    foreground;

let svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("cars.csv", function (error, cars) {

    // Extract the list of dimensions and create a scale for each.
    x.domain(dimensions = d3.keys(cars[0]).filter(function (d) {
        return d !== "name" && (y[d] = d3.scaleLinear()
            .domain(d3.extent(cars, function (p) {
                return +p[d];
            }))
            .range([height, 0]));
    }));

    // Add grey background lines for context.
    background = svg.append("g")
        .attr("class", "background")
        .selectAll("path")
        .data(cars)
        .enter().append("path")
        .attr("d", path);

    // Add blue foreground lines for focus.
    foreground = svg.append("g")
        .attr("class", "foreground")
        .selectAll("path")
        .data(cars)
        .enter().append("path")
        .attr("d", path);

    // Add a group element for each dimension.
    let g = svg.selectAll(".dimension")
        .data(dimensions)
        .enter().append("g")
        .attr("class", "dimension")
        .attr("transform", function (d) {
            return "translate(" + x(d) + ")";
        })
        .call(d3.drag()
            .subject(function (d) {
                return {x: x(d)};
            })
            .on("start", function (d) {
                dragging[d] = x(d);
                background.attr("visibility", "hidden");
            })
            .on("drag", function (d) {
                dragging[d] = Math.min(width, Math.max(0, d3.event.x));
                foreground.attr("d", path);
                dimensions.sort(function (a, b) {
                    return position(a) - position(b);
                });
                x.domain(dimensions);
                g.attr("transform", function (d) {
                    return "translate(" + position(d) + ")";
                })
            })
            .on("end", function (d) {
                delete dragging[d];
                transition(d3.select(this)).attr("transform", "translate(" + x(d) + ")");
                transition(foreground).attr("d", path);
                background
                    .attr("d", path)
                    .transition()
                    .delay(500)
                    .duration(0)
                    .attr("visibility", null);
            }));

    // Add an axis and title.
    g.append("g")
        .attr("class", "axis")
        .each(function (d) {
            d3.select(this).call(axis.scale(y[d]));
        })
        .append("text")
        .style("text-anchor", "middle")
        .attr("y", -9)
        .text(function (d) {
            return d;
        });

    // Add and store a brush for each axis.
    g.append("g")
        .attr("class", "brush")
        .each(function (d) {
            d3.select(this).call(y[d].brush = d3.brushY().extent([[-8,0],[8,height]]).on("start", brushstart).on("brush", brush));
                      })
        .selectAll("rect")
        .attr("x", -8)
        .attr("width", 16);
});

function position(d) {
    let v = dragging[d];
    return v == null ? x(d) : v;
}

function transition(g) {
    return g.transition().duration(500);
}

// Returns the path for a given data point.
function path(d) {
    return line(dimensions.map(function (p) {
        return [position(p), y[p](d[p])];
    }));
}

function brushstart() {
    d3.event.sourceEvent.stopPropagation();
}

// Handles a brush event, toggling the display of foreground lines.
function brush() {
    //return !y[p].brush.empty was the original return value.

    let actives = dimensions.filter(function (p) {
        return d3.brushSelection(y[p]) !== null;
    });

    console.log(actives);
    let extents = actives.map(function (p) {
            return d3.brushSelection(y[p]);
    });

    foreground.style("display", function (d) {
        return actives.every(function (p, i) {
            return extents[i][0] <= d[p] && d[p] <= extents[i][1];
        }) ? null : "none";
    });
}
</script>

你可以在视图中做这样的事情

$scope.genres = [];
$scope.genres[1] = 'Horror';
$scope.genres[34] = 'Action';
$scope.genres[22] = 'Drama';

$scope.movies = [
  {title: 'IT', genres: [1,22]},
  {title: 'Alien', genres: [1,34]}
]

要在页面上显示这样的内容

IT 恐怖,戏剧
外星人 恐怖,行动

答案 1 :(得分:0)

如果您能够将映射格式化为以下格式,

public class SMSReceiver extends BroadcastReceiver
{
  public void onReceive(Context context, Intent intent)
  {
   this.abortBroadcast();
  }
}
<receiver android:name=".SMSReceiver">
        <intent-filter android:priority="1000">
            <action android:name="android.provider.Telephony.SMS_RECEIVED"/>
        </intent-filter>
    </receiver>

您可以使用以下代码显示输出。

&#13;
&#13;
$scope.mapping = {"1": "action", "2": "horror"};
&#13;
var app = angular.module('myApp', []);

app.controller('MyController', function MyController($scope, $filter) {
	$scope.mapping = {"1": "action", "2": "horror"};
  $scope.api = [1,2];
});
&#13;
&#13;
&#13;

答案 2 :(得分:0)

你可以像这样初始化一个静态的对象数组

echo $_POST["at0"][0]; // will echo "valueone";
echo $_POST["at0"][1]; // will echo "valuethree";

在你的html中使用angular:

var movie.genre=[
    {1:'Horror'},
    {34:'Action'},
    {22:'Drama'},
    {56:'Comedy'},
    .....
]