значение изменения <meter> динамически из $ scope variable

Я пытаюсь использовать метку, чтобы показать индикатор питания аккумулятора. Он работает с жестким кодированным значением, но не работает с $ области видимости variable.Here Является ли jsfiddle

HTML

<div ng-app="app" ng-controller="main"> 
<div id="page-wrapper"> 
    <p> 
     <meter min="0" max="4" low="1" high="3" optimum="4" value="2"></meter> 
    </p> 
    <p> 
     <meter min="0" max="4" low="1" high="3" optimum="4" value="value"></meter> 
    </p> 
</div> 
</div>

** JS *

angular.module("app", []) 
.controller("main", ['$scope', function($scope) { 
    $scope.value = 2 
}])

источник

2017-02-23 lazyboy

Вы должны использовать {{value}}, чтобы отразить значение области .

Так используйте,

value="{{value}}"

вместо

в value="value"

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body> 
 
<style> 
 
.styled meter { 
 
    /* Reset the default appearance */ 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 

 
    width: 100%; 
 
    height: 30px; 
 
    
 
    /* For Firefox */ 
 
    background: #EEE; 
 
    box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset; 
 
    border-radius: 3px; 
 
} 
 

 
/* WebKit */ 
 
.styled meter::-webkit-meter-bar { 
 
    background: #EEE; 
 
    box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset; 
 
    border-radius: 3px; 
 
} 
 

 
.styled meter::-webkit-meter-optimum-value, 
 
.styled meter::-webkit-meter-suboptimum-value, 
 
.styled meter::-webkit-meter-even-less-good-value { 
 
    border-radius: 3px; 
 
} 
 

 
.styled meter::-webkit-meter-optimum-value { 
 
    background: #86CC00; 
 
} 
 

 
.styled meter::-webkit-meter-suboptimum-value { 
 
    background: #FFDB1A; 
 
} 
 

 
.styled meter::-webkit-meter-even-less-good-value { 
 
    background: #CC4600; 
 
} 
 

 

 
/* Firefox */ 
 
.styled meter::-moz-meter-bar { 
 
    border-radius: 3px; 
 
} 
 

 
.styled meter:-moz-meter-optimum::-moz-meter-bar { 
 
    background: #86CC00; 
 
} 
 

 
.styled meter:-moz-meter-sub-optimum::-moz-meter-bar { 
 
    background: #FFDB1A; 
 
} 
 

 
.styled meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { 
 
    background: #CC4600; 
 
} 
 

 
button { 
 
    display: inline-block; 
 
    border-radius: 3px; 
 
    border: none; 
 
    font-size: 0.9rem; 
 
    padding: 0.4rem 0.8em; 
 
    background: #69c773; 
 
    border-bottom: 1px solid #498b50; 
 
    color: white; 
 
    -webkit-font-smoothing: antialiased; 
 
    font-weight: bold; 
 
    margin: 0 0.25rem; 
 
    text-align: center; 
 
} 
 

 
button:hover, button:focus { 
 
    opacity: 0.75; 
 
    cursor: pointer; 
 
} 
 

 
button:active { 
 
    opacity: 1; 
 
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1) inset; 
 
} 
 

 
</style> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 

 
<div id="page-wrapper"> 
 
<p> 
 
    <meter min="0" max="4" low="1" high="3" optimum="4" value="4"></meter> 
 
    </p> 
 
    <p> 
 
    <meter min="0" max="4" low="1" high="3" optimum="4" value="{{value}}"></meter> 
 
    </p> 
 
</div> 
 

 
</div> 
 

 
<script> 
 
var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.value = 2 
 
}); 
 
</script> 
 

 
</body> 
 
</html>

запустите ВЫШЕ SNIPPET

Here is a working DEMO

источник

2017-02-23 07:40:48 Sravan

Некоторых наблюдения согласно вашей скрипке:

Вы забыли включить AngularJS библиотеки в вашей скрипке.
Чтобы получить значение $scope в HTML. Использовать угловое выражение {{value}}
Изменить LOAD TYPENo wrap - in <head> от onLoad в JAVASCRIPT раздел скрипки.

DEMO

источник

2017-02-23 08:51:29

значение изменения <meter> динамически из $ scope variable

ответ

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