选择HTML值是不显示字符串的整数

时间:2016-06-03 18:16:24

标签: html angularjs

我遇到了显示选择的问题

我有一个samplemodel值,它是数据库中的一个整数。截至目前,我想做一个如下选择,但我希望它显示字符串。该值将以我的双向绑定标记显示,但是当我在选择值中选择yes,no或na字符串时,它不会显示字符串或任何内容。

如何获取我的值以显示字符串vs int。

{{samplemodel}}
<select class="input-large input-large-altered" ng-model="samplemodel">
            <option value="1">Yes</option>
            <option value="2">No</option>
            <option value="3">NA</option>
        </select>

2 个答案:

答案 0 :(得分:3)

尝试在您的选择中使用ng-options。您可以选择您希望模型绑定的方式。

示例:

 $scope.myArray = [
 {Val: 1, Display: 'Yes'},
 {Val: 2, Display: 'No'},
 {Val: 3, Display: 'NA'}
];
$scope.samplemodel = "Yes";

//提供对象的显示字符串

{{samplemodel}}
    <select class="input-large input-large-altered" ng-options="item.Display as item.Display for item in myArray" ng-model="samplemodel">
    </select>

OR

//给出对象的val

 <select class="input-large input-large-altered" ng-options="item.Val as item.Display for item in myArray" ng-model="samplemodel">
    </select>

OR //给出整个对象

 <select class="input-large input-large-altered" ng-options="item as item.Display for item in myArray" ng-model="samplemodel">
        </select>

以下是plunkr为您提供的完整示例。

另外,为了解释ng-options,它的工作原理如同ng-options =&#34; [value]为[array]中[object]的[display]和#34;

答案 1 :(得分:0)

更新请使用@ Ohjay44的方法,因为它更高效。我会把它留下来,因为它仍然是一个有效的选择。

您必须使用过滤器:

<强> HTML

{{samplemodel | stringFromInt}}

<强> JS

app.filter('stringFromInt', function(){
    return function(input) {
      if (!input){
        return null;
      } else {
        return {1: 'Yes', 2: 'No', 3: 'NA'}[input];
      }
    }
});

https://plnkr.co/edit/DbQzDMSvCtyBWGSxvleU?p=preview